Published on

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 ↩