主页 / user-17250074

Symtox's questions

Martin Hope
Symtox
Asked: 2025-02-26 21:15:29 +0800 CST
  • 5

我正在尝试使用 CSS 锚点（我知道它还在试验阶段，但仍在进行中）。我尝试将一个按钮锚定在侧边栏的右侧。侧边栏在关闭时会平移到屏幕外，在打开时会返回。我希望锚定在侧边栏上的按钮能够跟随侧边栏的走向，但我无法让它跟随平移。

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('aside').setAttribute("aria-expanded", "true");
  }
)
div {
  background: red;
  height: 200px;
}

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: 0;
  inset-block: 0;
  transition: all 1s;
  transform: translateX(100%);
  anchor-name: --anchor-name;
}

aside[aria-expanded="true"] {
  transform: translateX(0);
}

button {
  position: absolute;
  position-anchor: --anchor-name;
  right: anchor(--anchor-name left);
  top: 50%;
  transform: translateY(-50%);
}

body { margin: 0; }
<div>
  <aside></aside>
  <button >Expand</button>
</div>

我找不到任何描述该行为的资源，有没有什么办法可以让它工作？编辑：我正在使用 Chrome 130.0.6723.116

css