CSS Anchor Positioning API

发布于

CSS Anchor Positioning API 是 Web 开发领域的颠覆性改变，因为它让你能够相对于其他元素以原生方式定位元素（称为“锚点”）。 此 API 简化了许多界面功能（例如菜单和子菜单、提示、选择、标签、卡片、设置对话框等）的复杂布局要求。 借助内置于浏览器中的锚点定位，您将能够构建分层界面，而无需依赖第三方库，开启了一个充满创意的世界。1

最新的 CSS Anchor Position 锚点定位是基于 absolute 定位的

设定锚点和定位元素

<style>
  button {
    /** 锚点 */
    anchor-name: --anchor-el;
  }

  .popover {
    /** 定位元素 */
    position-anchor: --anchor-el;
    position: 'absolute';
    bottom: anchor(top);
    left: anchor(right);
  }
</style>

<div>
  <button>button</button>
  <div class="popover">popover</div>
</div>

比如下面

popover

Footnotes

  1. CSS Anchor Positioning API ↩