如何使用CSS anchor-position将子元素锚定到父元素

我有如下HTML结构：

<button id="button-1">
     Button content
     <span class="tooltip">Tooltip</span>
</button>

我希望通过anchor-position将.tooltip定位在按钮上方，尝试了以下CSS：

button {
    anchor-scope: --button;
    anchor-name: --button;
}

.tooltip {
    position: absolute;
    position-anchor: --button;
    position-area: top;
}

但由于.tooltip是按钮的子元素，它无法正确识别锚点属性，无法定位到按钮上方。如何绕过这个限制，将父元素按钮作为tooltip的锚点？

参考可运行代码片段：

body{
 padding: 3em;
}

button {
 position: relative;
 anchor-scope:--button;
 anchor-name:--button;
 width: 10em;
 height: 3em;
 border-radius: .4em;
    
 &::after{
  display:block;
  position: absolute;
  content:attr(aria-label);
  background: black;
  color:white;
  margin-bottom: 5px;
  white-space: pre;
  padding: 0.3em;
  border-radius: .3em;
 }
}

#button-1::after{
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
}
#button-2:after{
 position-anchor: --button;
 position-area: top;
}

<button id="button-1" aria-label="Should be above (old transform)">
    Button
</button>


<button id="button-2" aria-label="Should be above(using anchor)">
    Button
</button>

问题核心是：当父元素button设置position: relative时，子元素（包括伪元素）的position: absolute会以父元素为定位上下文，此时position-area: top会将tooltip定位在按钮盒模型的内部顶部，而非外部上方。另外anchor-scope属于多余设置，它主要用于隔离锚点作用域，并非子元素访问父元素锚点的必要条件。

方法1：移除父元素的position: relative #

直接去掉按钮的position: relative，让tooltip的绝对定位上下文变为视口，此时position-anchor可以正确识别父元素锚点，将tooltip定位在按钮外部上方：

button {
    /* 移除position: relative */
    anchor-name: --button;
    width: 10em;
    height: 3em;
    border-radius: .4em;
}

.tooltip {
    position: absolute;
    position-anchor: --button;
    position-area: top;
    /* 可选：添加间距避免紧贴按钮 */
    position-offset: 0 0 5px 0;
}

方法2：保留position: relative，手动用anchor()函数定位 #

如果需要保留按钮的position: relative（比如按钮内部还有其他定位元素），可以用anchor()函数手动计算tooltip位置，让它对齐按钮外部顶部：

button {
    position: relative;
    anchor-name: --button;
    width: 10em;
    height: 3em;
    border-radius: .4em;
}

.tooltip {
    position: absolute;
    /* 将tooltip的底部对齐按钮的顶部 */
    bottom: anchor(--button top);
    /* 水平居中对齐按钮 */
    left: anchor(--button center);
    transform: translateX(-50%);
    /* 添加间距 */
    margin-bottom: 5px;
    /* 其他样式 */
    background: black;
    color: white;
    padding: 0.3em;
    border-radius: .3em;
}

方法3：使用position-anchor结合inset重置定位上下文 #

保留父元素的position: relative，同时重置tooltip的inset属性，让锚点定位优先级高于父元素的相对定位：

button {
    position: relative;
    anchor-name: --button;
    width: 10em;
    height: 3em;
    border-radius: .4em;
}

.tooltip {
    position: absolute;
    position-anchor: --button;
    position-area: top;
    /* 重置inset，脱离父元素的相对定位上下文 */
    inset: unset;
    /* 可选：添加间距 */
    margin-bottom: 5px;
}

内容的提问来源于stack exchange，提问作者pery mimon