当为内容容器设置 position: relative 以支撑内部绝对定位子元素时，若该容器位于 sticky 导航栏下方，滚动时可能因层叠上下文（stacking context）问题覆盖导航栏——根本原因是其创建了新的定位上下文且默认 z-index: auto，导致在文档流中“浮”于 sticky 元素之上。
当为内容容器设置 position: relative 以支撑内部绝对定位子元素时，若该容器位于 sticky 导航栏下方，滚动时可能因层叠上下文（stacking context）问题覆盖导航栏——根本原因是其创建了新的定位上下文且默认 z-index: auto，导致在文档流中“浮”于 sticky 元素之上。
在构建响应式、多栏布局（如模仿 Orlando Weekly 的左右分栏）时，开发者常对 .main-content 设置 position: relative，以便其子元素（如 .left-content 和 .right-content）能通过 position: absolute 精确定位。但这一做法容易引发一个经典层叠陷阱：.main-content 及其后代会覆盖顶部的 position: sticky 导航栏，即使已为 .navbar 设置了 z-index: 1000。
这是因为：
-
position: sticky元素（如.sticky-nav）的层叠顺序受其最近的层叠上下文祖先影响； - 当
.undercontent（.main-content的父容器）未显式参与层叠上下文构建时，.main-content的position: relative会使其自身成为独立的层叠上下文起点； - 此时，
.main-content的堆叠层级默认高于.sticky-nav所在的上下文，导致视觉上“穿透”覆盖。
✅ 正确解法不是盲目提升导航栏的 z-index，而是主动控制 .undercontent 的层叠层级：
.undercontent {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
height: 2000px;
position: relative; /* 创建可被 z-index 控制的层叠上下文 */
z-index: -1; /* 关键！将其整体置于 sticky 导航栏之下 */
}
? 注意：
z-index: -1仅在元素具有position值（如relative、absolute、fixed）时生效。此处正是利用此特性，将整个内容区域“压”到导航栏底层，同时不破坏其内部position: relative+absolute的布局逻辑。
? 补充说明与最佳实践：
-
避免滥用
z-index: auto的隐式行为：所有参与层叠的关键容器（尤其是 sticky 元素及其后续内容区块）都应显式声明position和z-index，形成清晰的层级契约； -
sticky 元素需有明确的
top和非auto的z-index：你的.sticky-nav已正确设置top: 0，但建议为.navbar（而非仅.sticky-nav）补充z-index: 1001，确保其子元素继承足够高的层级； -
慎用
z-index: -1的副作用：它会使元素无法响应鼠标事件（如点击、hover）。若.undercontent内需交互，请改用正向层级管理（例如给.sticky-nav设z-index: 1000，.undercontent设z-index: 999），而非负值； -
现代替代方案推荐：对于左右分栏，优先考虑 CSS Grid 或 Flexbox 布局，避免过度依赖
absolute定位——既更语义化，也天然规避层叠冲突。
最终效果：导航栏始终固定于视口顶部，内容区域平滑滚动于其下，左右分栏布局保持精准对齐，且完全兼容 sticky 行为规范。
