CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

本文主要是介绍CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需...

CSS Anchor Positioning：重新定义「锚定定位」的时代来了！

你是否在做 Tooltip、Popper、气泡卡片时，被繁杂的定位计算和 js 逻辑折磨？CSS Anchor Positioning 正式登场，用纯 CSS 的方式精确「锚定」任意元素，一次性解决层叠、滚动、居中等定位痛点！

什么是 Anchor Positioning？

CSS Anchor Positioning 是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持（需启用实验 flag）。它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位，而不是传统的父级元素。

就像 position: absolute 的终极进化版本。

它解决了哪些痛点？

✅ 弹出层的定位：Tooltip、菜单、卡片等，无需 JS 计算偏移；
✅ 自动适应视窗滚动：内建防止遮挡逻辑；
✅ 任意锚定目标：不仅限于父元素；
✅ 支持多锚点选择、优先级设置等；

实战演示：实现一个纯 CSS 的 Tooltip

️ 先上效果图！

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

✅ html 结构

<!-- html -->
<div class="anchor">⚓︎</div>
<p class="positionedElement">This is a positioned element.</p>

CSS 样式

/* css */
:root {
      -php-anchohttp://www.chinasem.cnr-width: 60px;
      --anchor-height: 90px;
    }
    .anchor {
      positiwww.chinasem.cnon: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      // 主要实现部分！
      anchor-name: --infobox;
      background: palegoldenrod;
      font-size: 3em;
      width: var(--anchor-width);
      height: var(--anchor-height);
      border: 1px solid goldenrod;
      text-align: center;
    }
    .positionedElement {
      display: none;
      position: absolute;
      // 主要实现部分！
      position-anchor: --infobox;
      margin: 0;
      top: anchor(top);
      left: anchor(right);
      bottom: anchor(bottom);
      background-color: olive;
      transform: translate(calc(var(--anchor-width)/2 * -1), calc(var(--anchor-height)/2 * -1));
      border: 1px solid darkolivegreen;
    }

Javascript

// 可以看到我的js中没有任何的关于位置计算的代码！
const tip = document.querySelector('.positionedElement')
    const anchor = document.querySelector('.anchor')
    anchor.addEventListener('mouseenter', () => {
      tip.style.display = 'block'
    })
    anchor.addEventListener('mouseleave', () =www.chinasem.cn> {
      tip.style.display = 'none'
    })

利用 anchor() 函数直接“锁定”另一个元素的位置。position-anchor 可绑定任意锚点。

说明：