通过为超宽子元素添加带 overflow: hidden 的定位包装器，可使其视觉上“缩进”至父容器后方，同时自然层叠于主体内容之上，无需依赖 z-index。
通过为超宽子元素添加带 `overflow: hidden` 的定位包装器，可使其视觉上“缩进”至父容器后方，同时自然层叠于主体内容之上，无需依赖 `z-index`。
在固定定位的 <header></header> 中，当导航菜单（<ul></ul>）宽度设为 100vw 且使用 position: absolute 时，其实际渲染区域会超出窄父容器（如仅 20px 宽的 <nav></nav>），导致菜单在 Z 轴上仅被 <nav></nav> 遮挡局部，其余部分仍覆盖 <main></main> 和 <footer></footer> —— 这违背了“菜单应整体沉入 header 底层、但浮于页面主内容之上”的设计意图。
关键在于控制定位上下文与裁剪边界。原结构中 <ul></ul> 直接相对于 <nav></nav> 定位，而 <nav></nav> 自身宽度极小，无法提供有效的包含块约束。解决方案是引入一个轻量级包装器（如 <div class="menu-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>✅ <strong>原理说明</strong>： </p>
<ul>
<li>
<code>wrapper 设置 position: absolute + width: 100vw，使其铺满视口宽度并锚定在 <nav></nav> 下方；
overflow: hidden 是核心——它创建新的层叠上下文（stacking context），同时裁剪内部 <ul></ul> 的溢出内容，确保整个菜单视觉上“收束”在 <header></header> 的 Z 层内； <ul></ul> 恢复为静态流式布局（移除 position: absolute 和 z-index: -1），自然继承 wrapper 的层叠层级，既低于 <header></header>（因 wrapper 与 <nav></nav> 同属 header 的 stacking context），又高于 <main></main>（因 <header></header> 整体 z-index: 1）。⚠️ 注意事项：
- 切勿对
<ul></ul>单独设置负z-index（如-1），这会将其推入根层叠上下文底层，导致被<main></main>覆盖； -
wrapper必须保留position: absolute，否则无法脱离<nav></nav>流式限制； - 若需支持移动端滚动穿透或动画，可在 wrapper 上添加
pointer-events: none并在<ul></ul>上显式设回pointer-events: auto。
此方案完全遵循“仅改 CSS（含内联样式）”的要求，不改动 HTML 结构本质，以最小侵入性实现精准的 Z 轴控制。
