z-index需配合非static的position使用，通过整数值控制元素堆叠顺序，数值越大越靠前，但受堆叠上下文限制，各上下文内独立比较层级。
在CSS中，控制元素的层级主要依靠 z-index 属性，但它必须和 position 属性配合使用才能生效。下面详细说明它们如何结合使用来管理页面元素的堆叠顺序。
z-index 与 position 的关系
z-index 只对定位元素起作用。也就是说，只有当一个元素的 position 值不是 static（默认值）时，设置 z-index 才会有效。
常见 position 取值包括：
只要设置了以上任意一种，就可以通过 z-index 控制该元素在 Z 轴上的堆叠顺序。
立即学习“前端免费学习笔记（深入）”；
z-index 的数值规则
z-index 接受整数（正、负、0），数值越大，元素越“靠前”显示。
- 正数层级高于未设置或 z-index: 0 的元素
- 负数层级显示在最底层（需父容器不形成新的堆叠上下文限制）
- 相同 z-index 值时，HTML 中后出现的元素覆盖前面的
堆叠上下文的影响
z-index 不是全局比较的。浏览器会创建“堆叠上下文”，每个上下文内部独立管理层级。一旦某个祖先元素建立了堆叠上下文（比如设置了 opacity
这意味着：即使子元素 z-index 设为 999，如果父级堆叠上下文层级低，它也无法盖过外部更高层级的元素。
实用示例
让一个弹窗始终显示在最上层：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
这里 .modal 在 .overlay 之上，因为 z-index 更高，两者都通过 fixed 定位激活了 z-index 生效条件。
基本上就这些。记住：想控制层级，先设 position 为非 static，再用 z-index 调整前后顺序，同时留意堆叠上下文的边界影响。
