CSS定位：绝对定位的子元素相对于body的偏移

前端开发 2026-07-10

<body>
  <main class="container">
    <nav>
      <ul>
        <li><strong>Dropdown Demo</strong></li>
      </ul>
      <ul>
        <li>
          <details class="dropdown">
            <summary>Account</summary>
            <ul dir="rtl">
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </details>
        </li>
      </ul>
    </nav>
  </main>
</body>

（此演示的CodePen）

这个怪异之处在于下拉导航项中那个嵌套的 <ul>。

其中的 <details> 被定位在 relative，而 <ul> 被定位在 absolute。

如预期，我查看 <ul> 时，其偏移父元素是 <details>。

不过，当我点击下拉以打开它时，偏移父元素突然变成 <body>。

我觉得这可能是因为当 <details> 应用了 open 属性时所应用的某个样式所导致的，但我还没能准确找出究竟是哪一个原因造成的。

为什么偏移父元素会改变？有哪些样式会让处于 relative 父级中的 absolute 子项发生这种情况？