当父元素设为 `position: sticky` 且子元素为 `position: absolute` 时，多个同级 sticky 元素会因层叠上下文和默认堆叠顺序导致遮挡异常；正确设置 `z-index`（尤其区分 `:first-of-type` 和 `:last-of-type`）可强制控制渲染层级。
在 SCSS（或 CSS）布局中，position: sticky 元素会创建新的层叠上下文（stacking context），而该上下文内所有后代元素（包括 position: absolute 的 .wrap）的 z-index 仅在该上下文内部生效。这意味着：不同 .parent 元素之间彼此独立，它们的 z-index 默认按文档流顺序堆叠（后出现的元素覆盖先出现的），而非统一受全局 z-index 控制。
在你的示例中：
- 第一个 .parent 渲染在前，其内部 .wrap（z-index: 1）正常显示在自身之上；
- 第二个 .parent 渲染在后，即使它内部没有 .wrap，其自身作为一个 sticky 块仍会「覆盖」第一个 .parent 的 .wrap —— 因为两个 .parent 处于同一层叠层级（均无显式 z-index，等价于 z-index: auto），浏览器按 DOM 顺序决定谁在上。
✅ 正确解法不是给 .wrap 调整 z-index，而是主动为每个 .parent 指定差异化的 z-index 值，打破默认文档流堆叠逻辑：
.parent {
width: 100px;
height: 50px;
background-color: blue;
position: sticky;
top: 0; // 推荐显式设置 sticky 边界（如 top: 0）
// 关键：通过伪类差异化控制兄弟元素层级
&:first-of-type {
z-index: 2; // 确保第一个 parent 及其 wrap 位于最上层
}
&:last-of-type {
z-index: 0; // 让第二个 parent 主动退到下层，不遮挡前者的 wrap
}
.wrap {
position: absolute;
top: -5px;
left: -5px;
z-index: 1; // 在 first-of-type 上下文中有效（1 < 2 → 安全）
width: 50px;
height: 210px;
background-color: red;
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- z-index 仅对定位元素（position 为 relative/absolute/sticky/fixed）生效，sticky 父元素必须显式声明 z-index 才能参与兄弟间层叠排序；
- 避免使用 z-index: -1（如原代码中），它可能将元素置于其包含块背景之下，引发不可预期裁剪；
- 若实际结构中 .parent 数量不固定（不止两个），建议改用 :nth-child(n) 或添加语义化 class（如 .parent--top, .parent--modal-backdrop）配合明确 z-index 值；
- 在 Modal 场景中，推荐将 .wrap（即模态框内容）提升至独立层叠上下文（例如移出 .parent DOM 结构，挂载到 下），从根本上规避 sticky 层叠限制。
总结：sticky + absolute 的组合本身合法，但层叠问题根源在于未主动管理兄弟 sticky 元素间的 z-index 优先级。通过精准的伪类选择器赋予差异化 z-index，即可在不修改定位方式的前提下，实现符合预期的视觉层级。
