position-anchor在锚点为position:fixed时失效问题求助

问题场景 #

尝试使用CSS锚点定位将按钮对齐到fixed定位的<aside>右下角，但发现当<aside>设为fixed或absolute时，锚点引用失效，Chrome开发者工具提示--sidebar is not defined；仅当<aside>设为relative或static时，锚点功能正常。

问题代码 #

CSS

#sidebar {
  anchor-name: --sidebar;
  height: 100vh;
  width: max-content;
  position: fixed;
}

button.sidebar-toggle-button {
  position: absolute;
  position-anchor: --sidebar;
  left: anchor(right);
  bottom: anchor(bottom);
  z-index: 1;
}

HTML

<aside id="sidebar" class="scrollbar-custom">
  ... content ...
  <button class="sidebar-toggle-button button-base">
    <!-- ☰ Glossary -->
  </button>
</aside>

原因分析 #

这是当前CSS锚点定位实现的局限性导致的：

• 当锚点元素设置为fixed/absolute时，它会脱离常规文档流，形成独立的定位上下文；
• 其子元素设为position: absolute时，布局上下文是父元素本身，但position-anchor的锚点查找机制无法在这种嵌套的独立定位上下文中识别父元素定义的锚点名称，从而导致锚点引用失败。

解决办法 #

方案1：直接利用子元素绝对定位（推荐）

既然按钮是<aside>的子元素，直接借助父元素的定位上下文即可实现需求，无需依赖锚点定位：

#sidebar {
  height: 100vh;
  width: max-content;
  position: fixed;
}

button.sidebar-toggle-button {
  position: absolute;
  left: 100%; /* 对齐父元素右侧，等价于anchor(right) */
  bottom: 0; /* 对齐父元素底部，等价于anchor(bottom) */
  z-index: 1;
}

方案2：调整DOM结构，用锚点定位

如果一定要使用CSS锚点定位，可将按钮改为<aside>的兄弟元素，使其能正确识别fixed定位的锚点：

<aside id="sidebar" class="scrollbar-custom">
  ... content ...
</aside>
<button class="sidebar-toggle-button button-base">
  <!-- ☰ Glossary -->
</button>

CSS保持原逻辑不变：

#sidebar {
  anchor-name: --sidebar;
  height: 100vh;
  width: max-content;
  position: fixed;
}

button.sidebar-toggle-button {
  position: absolute;
  position-anchor: --sidebar;
  left: anchor(right);
  bottom: anchor(bottom);
  z-index: 1;
}

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