如何让宽于父元素的子元素在Z轴上处于header后方、页面内容上方

方案一（让nav占满header宽度） #

修改后的HTML（仅调整内联样式）：

<header style="width: 100%; position: fixed; left: 0; z-index:1;">
  <nav style="position: relative; z-index: 1; width: 100%;">
    <button style="width: 20px; height: 4px;">
      Open nav
    </button>
    <ul style="width: 100vw; min-height: 100vh; position: absolute; top: 100%; left: 0; z-index: -1;">
      <!-- Some links... -->
    </ul>
  </nav>
</header>
<main>
      <!-- Some content... -->
</main>
<footer>
      <!-- Some content... -->
</footer>

原理：

• 给nav添加width: 100%，让它占据header的全部宽度，确保ul的所有区域都处于nav的堆叠上下文范围内。
• 给nav设置z-index: 1，让它在header的堆叠上下文里处于上层，完全覆盖ul。
• 保持ul的z-index: -1，使其在nav的堆叠上下文里处于下层，同时header的z-index:1确保ul显示在main、footer等内容上方。

方案二（保持nav原有宽度） #

修改后的HTML（仅调整内联样式）：

<header style="width: 100%; position: fixed; left: 0; z-index:1;">
  <nav style="position: relative; z-index: 1;">
    <button style="width: 20px; height: 4px;">
      Open nav
    </button>
    <ul style="width: 100vw; min-height: 100vh; position: absolute; top: 100%; left: 0; z-index: 0;">
      <!-- Some links... -->
    </ul>
  </nav>
</header>
<main>
      <!-- Some content... -->
</main>
<footer>
      <!-- Some content... -->
</footer>

原理：

• 移除nav的position: relative后，ul的定位父级变为header（fixed定位元素），ul的z-index:0相对于header的堆叠上下文生效。
• 给nav设置position: relative; z-index:1，让它在header的堆叠上下文里层级高于ul，确保button和nav区域能遮挡ul。
• header的z-index:1保证整个header堆叠上下文（包括ul）处于main、footer的上方。

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