锚点

anchor-name 和 position-anchor 将两个元素关联（锚定）起来，这个标识符必须要以双短横线开头，和 CSS 变量名是一样的，其他的则无效如下

button{
  anchor-name: --anchor-el;
}
tooltip{
  position: absolute;
  position-anchor: --anchor-el;
}

之后可以直接设置定位：

tooltip{
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%)
}

描点定位

锚定居中 anchor-center

上面水平居中用到了left和transform来实现，其实还有新的实现方式，那就是anchor-center，不过这需要配合justify-self和align-self使用。

比如要水平居中，可以直接使用

tooltip{
  bottom: anchor(top);
  justify-self: anchor-center;
}

如果要垂直居中，可以用align-self

tooltip{
  right: anchor(left);
  align-self: anchor-center;
}

position-area

划分 9 宫格的定位

position-area: top; /* 居上，无尺寸限制 */
position-area: top center; /* 居上并且不超过锚定元素尺寸 */
position-area: top span-left;  /* 居上并且左边可以扩展 */
position-area: top span-right;  /* 居上并且右边可以扩展 */
position-area: left;
position-area: left center;
position-area: left span-top;
position-area: left span-bottom;
position-area: bottom center;
position-area: bottom span-left;
position-area: bottom span-right;
position-area: bottom;
position-area: right center;
position-area: right span-top;
position-area: right span-bottom;
position-area: right;
position-area: top left; /* 左上角 */
position-area: top right; /* 右上角 */
position-area: bottom left; /* 右下角 */
position-area: bottom right; /* 右下角 */

anchor

anchor() 函数还可以用来告诉你的定位元素应该相对于哪个锚点来定位。换句话说，可以在 anchor() 函数中同时定义 anchor-name 和要定位的边缘，确保元素之间的完美配合：

.target {
    position: absolute;
    bottom: anchor(--anchor-name top);
    right: anchor(--anchor-name left);
}

我们可以将一个元素同时锚定到其他的两个元素上，即多锚点定位

.target {
    position: absolute;
    top: anchor(--anchor-element-one bottom);
    left: anchor(--anchor-element-one right);
    right: anchor(--anchor-element-two left);
    bottom: anchor(--anchor-element-two top);
}

通过将目标元素连接到这两个锚点元素，它可以在窗口调整大小或锚点移动时动态调整，平滑地扩展和收缩

锚点尺寸 anchor-size

anchor-size(width) /*锚点元素宽度*/
anchor-size(height)  /*锚点元素高度*/
// 使用
width: anchor-size(width);
height: anchor-size(height);

导航栏

<nav class="tab">
  <a class="item" href="#HTML" name="HTML">HTML</a>
  <a class="item" href="#CSS" name="CSS">CSS</a>
  <a class="item" href="#JavaScript" name="JavaScript">JavaScript</a>
  <a class="item" href="#React" name="React">React</a>
  <a class="item" href="#Vue" name="Vue">Vue</a>
</nav>

配置 css

.tab::after{
  content: '';
  position: absolute;
  border-radius: 100px;
  background-color: rgba(65, 105, 225, 0.2);
  position-anchor: --anchor-el;
  width: anchor-size(width);
  height: anchor-size(height);
  left: anchor(left);
  top: anchor(top);
  transition: .3s;
  pointer-events: none;
}
.item:target{
  anchor-name: --anchor-el;
}

动态调整位置 position-try-options

有时候定位元素会处于屏幕边缘，当没有足够空间显示时，可以通过position-try-options来设置一个备用位置，这种情况就可以用@position-try来实现了，具体做法是这样的

先通过position-try-options指定一个变量名，比如--bottom

tooltip{
      position: fixed;
      position-anchor: --anchor-el;
      position-area: top;
      position-try-options: --bottom;
}

然后通过@position-try来定义规则

@position-try --bottom {
  position-area: bottom;
}

除此之外，还有一种便捷写法，直接给position-try-options指定以下关键字

position-try-options: flip-block; /*垂直翻转*/
position-try-options: flip-inline; /*水平翻转*/

和 popover 配合使用

popover 属性介绍： https://juejin.cn/post/7238233943610032188

毕竟popover只是解决了层级的问题，而锚点定位解决了定位问题。两者结合，我们可以很轻松的实现各种常见的效果，已经可以说能够完全替代主流框架中的popover组件了

首先是点击出现，这个就是popover的功能了，通过popovertarget和popover属性，将两者结合起来，就能轻松实现点击出现菜单的功能

<button class="btn" popovertarget="more"></button>
<div class="menu" id="more" popover>
  <button class="item">编辑</button>
  <button class="item">删除</button>
</div>

利用 CSS 锚点定位

.btn{
  anchor-name: --menu;
}
.menu{
  position-anchor: --menu;
  position-area: bottom span-right;
}

示例： https://codepen.io/xboxyan/pen/qBGpOKq

position-visibility与滚动溢出显隐

这也是个非常棒的特性，以前经常遇到tips提示无法出现在滚动区域之外的问题，现在好了，有个多种显隐策略可供选择，这个就是position-visibility，根据我的测试，此属性目前仅可以用在锚点定位场景中，以后有可能会扩展到普通元素场景。

语法

position-visibility: always;
position-visibility: anchors-visible;
position-visibility: no-overflow;

⬤ always是默认行为，表示一直显示，显隐状态与锚点元素或浮层元素的位置无关，在子容器滚动的时候，要么一起跟着滚走，要么滚动的时候纹丝不动（看定位元素在子滚动元素的里面还是外面，以及包含块的关系）

⬤ anchors-visible则表示，如果锚点元素在滚动容器内完全不可见，则定位元素也变得不可见

⬤ no-overflow则是看定位元素位置的，如果定位元素触碰到了子滚动容器的边界，则定位元素消失不可见