position-anchor not working when the anchor is position:fixed

Question

I'm trying to align a to the bottom-right corner of an element using the CSS Anchor Positioning

#sidebar {
  anchor-name: --sidebar;
  height: 100vh;
  width: max-content;
  position: fixed; /* Sidebar is fixed to the viewport */
}
button.sidebar-toggle-button {
    position: absolute;
    position-anchor: --sidebar;
    left: anchor(right);
    bottom: anchor(bottom);
    z-index: 1;
}

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

• When the position of #sidebar is set to relative or static, the position-anchor: --sidebar works as expected.
• However, when I set position: fixed or absolute on #sidebar, Chrome's DevTools reports '--sidebar is not define` and the position-anchor stops working.

Why it fail, I'm missing something ?
Are there a way to make it work ?

Answer 1

I found a related thread on GitHub: CSSWG Drafts Issue #10419, which discusses a similar issue.

The solution lies in the order of elements in the DOM tree. The position-anchor property depends on the anchor element being defined before the element that references it.

To fix my issue, I moved the tag after the in the DOM, and now it works as expected.

Code Before (Not Working)

<button class="sidebar-toggle-button">Toggle Sidebar</button>
<aside id="sidebar">
  <!-- Sidebar content -->
</aside>

Code After (Working)

<aside id="sidebar">
  <!-- Sidebar content -->
</aside>
<button class="sidebar-toggle-button">Toggle Sidebar</button>