CSS 锚点定位 - 锚点定位引入（anchor-name、position-anchor）

我命由我123452025-12-24 16:16

html 复制代码

<button class="anchor">点击我</button>
<div class="tooltip">我是工具提示</div>

使用锚点定位

css 复制代码

/* 锚点元素 */
.anchor {
    anchor-name: --my-btn;
    position: relative;
}

/* 定位元素 */
.tooltip {
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    position: fixed;

    /* tooltip 的上边缘对齐 anchor 的上边缘 */
    top: anchor(--my-btn top);

    /* tooltip 的左边缘对齐 anchor 的右边缘 */
    left: anchor(--my-btn right);
}

另一种写法

css 复制代码

/* 锚点元素 */
.anchor {
    anchor-name: --my-btn;
    position: relative;
}

/* 定位元素 */
.tooltip {
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    position: fixed;

    /* tooltip 定位相对于 anchor */
    position-anchor: --my-btn;

    /* tooltip 的上边缘对齐 anchor 的上边缘 */
    top: anchor(top);

    /* tooltip 的左边缘对齐 anchor 的右边缘 */
    left: anchor(right);
}