定位是z-index生效的前提，只有设置relative、absolute、fixed或sticky的元素才能通过z-index控制层级；z-index数值越大，元素在Z轴越靠前，但受堆叠上下文限制，父级上下文层级低时子元素无法超越；实际应用中需确保元素已定位、z-index为具体数值，并避免高数值滥用，建议分层管理如10、100、1000用于背景、内容、弹窗等，配合开发者工具排查问题。
当多个元素在页面中发生重叠时，控制哪个元素显示在上方、哪个在下方，关键在于理解 z-index 与定位机制的配合使用。只有正确设置定位属性和层级顺序，才能实现预期的堆叠效果。
定位是 z-index 生效的前提
z-index 并非对所有元素都起作用，它只对已定位元素有效。这意味着元素必须满足以下任一定位方式：
- position: relative —— 相对自身原位置偏移
- position: absolute —— 相对于最近的已定位祖先元素定位
- position: fixed —— 相对于视口固定定位
- position: sticky —— 根据滚动状态切换定位模式
如果一个元素没有设置以上任意一种 position 值，即使设置了 z-index，也不会产生层级变化。
z-index 控制堆叠顺序
z-index 的数值决定元素在 Z 轴上的显示顺序。数值越大，越靠前显示。常见用法如下：
立即学习“前端免费学习笔记（深入）”；
- 默认值为 auto，等同于 0（在当前堆叠上下文中）
- 设置为正整数（如 1、10、999），元素会浮在普通内容之上
- 设置为负数（如 -1），可将元素置于背景层之下（需父容器 overflow: visible）
例如，让弹窗始终显示在最上层：
.example-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
注意堆叠上下文的嵌套影响
z-index 的作用范围受限于堆叠上下文（stacking context）。每个堆叠上下文内部独立计算层级，外部无法跨越。以下情况会创建新的堆叠上下文：
- 根元素（html）自动创建
- position 不为 Static 且 z-index 为数值（非 auto）
- flex 或 grid 容器的子项（若 z-index 不为 auto）
- opacity 小于 1
- transform、Filter、will-change 等属性触发
这意味着：即使子元素 z-index 设为 9999，若其父容器创建了较低层级的堆叠上下文，它也无法超过另一个父容器的高 z-index 元素。
实用建议与调试技巧
解决重叠问题时，可按以下步骤排查：
- 确认重叠元素是否已定位（relative/absolute/fixed/sticky）
- 检查 z-index 是否设置为具体数值而非 auto
- 查看是否存在父级堆叠上下文限制了提升空间
- 使用浏览器开发者工具“Computed”面板验证实际生效的 z-index 和 position
- 避免滥用极高数值（如 99999），建议分层管理：10 → 100 → 1000（背景、内容、弹窗、提示）
基本上就这些。掌握定位与 z-index 的关系，再留意堆叠上下文的边界，就能精准控制页面元素的前后层次。不复杂但容易忽略细节。