使用Pico CSS时，absolute子元素的offset parent为何从relative父元素变为body？

我正在使用Pico CSS搭建网站，导航下拉菜单代码如下：

<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>

问题出在下拉菜单项内的嵌套<ul>元素：<details>为relative定位，<ul>为absolute定位，初始时<ul>的offset parent是<details>，但点击打开下拉菜单后，offset parent突然变为<body>。猜测这是<details>添加open属性时的样式导致，但无法确定具体原因。

问题原因 #

这是Pico CSS针对details[open]的内置样式导致的：当<details>被激活添加open属性后，Pico会给它设置position: static，直接覆盖了原本的position: relative。而position: static是元素的默认定位值，无法作为absolute定位元素的offset parent，因此子元素<ul>会向上查找最近的非static定位父元素，最终只能落到<body>上。

会引发此类问题的常见样式 #

• 父元素position被改为static：absolute元素的offset parent必须是relative/absolute/fixed/sticky定位的元素，一旦父级定位变回static，就会失去offset parent的资格。
• 父元素设置display: contents：该属性会让元素本身从布局树中移除，直接子元素会被提升到父元素的层级，导致原本的absolute子元素丢失这个定位容器。
• 父元素添加contain: layout/contain: strict：这类包含规则会限制元素的布局上下文，可能导致absolute子元素无法识别父元素作为offset parent。
• 父元素被设置transform/perspective/filter（特殊场景）：虽然这些属性通常会创建新的堆叠上下文，但部分浏览器的特殊处理可能会间接改变offset parent的关联，不过这种情况相对少见。

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