position: sticky 元素默认位于其后出现的 position: relative 兄弟元素下方，根本原因在于 HTML 文档流中的源顺序（source order）决定了基础层叠层级，而非 sticky 是否创建堆叠上下文；z-index 才是显式控制同级元素前后关系的关键。
`position: sticky` 元素默认位于其后出现的 `position: relative` 兄弟元素下方，根本原因在于 html 文档流中的源顺序（source order）决定了基础层叠层级，而非 sticky 是否创建堆叠上下文；z-index 才是显式控制同级元素前后关系的关键。
在你提供的代码中，#nav（sticky）位于 #card（relative）之前，二者均为 的直系子元素，且均未设置 z-index。此时浏览器依据 CSS 2.1 层叠顺序规则（stacking order） 进行渲染：同一层叠上下文中，后声明的元素自然覆盖先声明的元素——这与是否创建新堆叠上下文无关。
✅ 关键澄清：
-
position: sticky确实会为自身创建新的堆叠上下文（stacking context），但这仅影响其内部子元素的层叠关系（如#nav > .logo和#nav > .menu之间的 z-order）。 - 它不会改变
#nav自身在父容器（即）中的层叠层级。#nav和#card同属的子元素，共享同一个根堆叠上下文（initial containing block），此时决定谁在上的唯一标准是：
① 是否设置了z-index（非auto）；
② 若都未设置，则按 HTML 源顺序：后出现者（#card）覆盖先出现者（#nav）。
? 验证方式（开发者工具中观察）：
- 查看
#nav的 Computed →z-index: auto→ 属于“无明确层叠层级”的普通元素； - 查看
#card的 Computed →z-index: auto→ 同样普通； - 此时浏览器严格按 DOM 顺序绘制：
#nav绘制在底层，#card绘制在其上，导致滚动时#nav被遮挡。
✅ 正确修复方案（只需一行 CSS）：
#nav {
position: sticky;
top: 0;
height: 50px;
background-color: #333;
z-index: 1000; /* 显式提升层级，确保高于后续兄弟元素 */
}⚠️ 注意事项：
-
z-index只对定位元素（position值不为static）生效，sticky已满足条件； - 不需要给
#card设置z-index或position: relative来“配合”——它本就是relative，但z-index: auto仍使其处于默认层叠层级； - Safari / Chrome / Firefox 行为一致，这是 CSS 规范强制要求，非浏览器 Bug；
- 避免误用
transform、filter等隐式创建堆叠上下文的属性包裹#nav，否则可能意外隔离其z-index作用域。
? 进阶提示：若需构建复杂 UI 层级（如导航栏 > 弹窗 > 浮动按钮），建议统一使用 z-index 命名规范（如 z-nav: 100, z-modal: 900, z-fab: 1100），并配合 CSS 自定义属性管理，提升可维护性。
