通过为超宽子元素添加带 overflow: hidden 的定位包裹层，可使其视觉上完全置于父容器后方，无需依赖 z-index，且不改变原有HTML结构。
通过为超宽子元素添加带 `overflow: hidden` 的定位包裹层，可使其视觉上完全置于父容器后方，无需依赖 `z-index`，且不改变原有html结构。
在CSS层叠上下文（stacking context）中，一个子元素能否“整体”显示在父容器之后，不仅取决于 z-index，更关键的是其包含块（containing block） 和溢出裁剪行为。原问题中，<ul></ul> 设置了 position: absolute; width: 100vw; z-index: -1，但因其直接位于 position: relative 的 <nav></nav> 内，而 <nav></nav> 实际宽度仅约 20px（由按钮撑开），导致该 ul 的绝对定位是以窄 nav 为参考，左侧对齐后，仅前 20px 区域受 nav 的层叠上下文约束，右侧大段内容则脱离该上下文，回退到 <header></header> 或根层叠上下文中——从而“穿透”到其他页面内容上方，违背预期。
✅ 正确解法是：不操作 z-index，而是用结构化CSS控制视觉归属与裁剪。只需在外层新增一个语义中性、严格约束尺寸的包裹元素（如 <div class="nav-dropdown-wrapper">），并将定位、宽高和裁剪逻辑全部赋予它：<pre class="brush:php;toolbar:false;"><header style="width: 100%; position: fixed; left: 0; z-index: 1;"><nav style="position: relative;"><button style="width: 20px; height: 4px;">Open nav</button>
<!-- 新增 wrapper：承担定位与裁剪职责 -->
<div style="position: absolute; top: 100%; left: 0; width: 100vw; overflow: hidden;">
<ul style="min-height: 100vh;"><!-- Some links... --></ul>
</div>
</nav></header></pre>
<p>关键点解析：</p>
<ul>
<li>
<code>wrapper 设置 position: absolute + top: 100% + left: 0 + width: 100vw，确保它精确覆盖从导航触发点向右延伸至视口全宽的区域；
overflow: hidden 是核心：它强制创建新的块级格式化上下文（BFC），同时裁剪所有超出其边界的子内容（即 <ul></ul>），并使 <ul></ul> 的渲染完全“隶属于”该 wrapper —— 因此整个下拉区域在视觉上被视为一个整体，稳定地位于 <header></header> 层叠层级之下（因 wrapper 无 z-index，默认与 <nav></nav> 同层，而 <header></header> 的 z-index: 1 已确保其高于 <main></main>/<footer></footer>）；<ul></ul> 本身恢复为静态流式布局（移除 position: absolute 和 z-index），由 wrapper 统一管控位置与可见性，避免层叠混乱。⚠️ 注意事项：
- 切勿对
<ul></ul>单独设负z-index（如-1），这会使其脱离当前层叠上下文，反而可能浮现在<main></main>之上； - 若需支持移动端视口缩放或横屏，建议用
width: 100dvw（动态视口单位）替代100vw，规避 iOS Safari 中vw在地址栏显示/隐藏时的计算偏差； - 此方案完全兼容原HTML结构，仅通过CSS（含内联样式）调整，零JS依赖，语义清晰，性能高效。
总结：Z轴控制的本质是层叠上下文管理，而非单纯数值比大小。当需要“视觉上整体置后”，优先考虑创建受控的定位容器 + BFC裁剪，比强行调节 z-index 更稳健、可维护。
