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

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

1. 使用锚点定位

/* 锚点元素 */.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);}

2. 另一种写法

/* 锚点元素 */.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);}