z-index用于控制定位元素的堆叠顺序，值越大越靠前，需配合position使用，且受堆叠上下文限制，父级上下文层级低时子元素高z-index也可能被覆盖。
在CSS中，z-index 属性用于控制元素的堆叠顺序，也就是决定哪些元素显示在前面，哪些显示在后面。当多个元素在页面上发生重叠时，z-index 起到关键作用。
z-index 的基本原理
默认情况下，HTML 元素按照文档流的顺序进行堆叠：后出现的元素会覆盖先出现的元素。但通过设置 position 和 z-index，可以主动控制这种覆盖关系。
注意：z-index 只对定位元素生效，也就是说元素必须设置了 position 为 relative、absolute、fixed 或 sticky 才能使用 z-index。
- z-index 值越大，元素越靠前
- z-index 值越小，元素越靠后
- 未设置 z-index 的定位元素，默认值为 auto，相当于 0
- 非定位元素即使设置 z-index 也不会生效
常见使用场景与示例
假设你有两个重叠的 div，想让某个 div 显示在最上面：
立即学习“前端免费学习笔记（深入）”；
<div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: red; z-index: 1;">红色块</div> <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background: blue; z-index: 2;">蓝色块</div>
这里蓝色块的 z-index 更高，因此会覆盖红色块的一部分。
处理堆叠上下文（Stacking Context）
z-index 不是全局比较的，它受堆叠上下文的影响。每个堆叠上下文是一个独立的“层级空间”，子元素的 z-index 只在该上下文中有效。
以下情况会创建新的堆叠上下文：
- 根元素（<html>）
- position 值为 fixed 或 sticky 的元素（在支持的浏览器中）
- position 为 absolute 或 relative，且 z-index 不为 auto 的元素
- flex 或 grid 容器的子项，如果 z-index 不为 auto
- opacity 小于 1 的元素
- 其他 CSS 属性如 transform、filter 等也会触发
这意味着，即使一个元素的 z-index 是 999，如果它的父容器创建了堆叠上下文且层级较低，它也可能被 z-index 较小但处于更高上下文的元素覆盖。
实用建议
为了避免混乱，建议：
- 只在必要时使用 z-index，避免滥用
- 使用语义化的数值，比如导航栏用 1000，弹窗用 2000，提示层用 3000
- 避免使用极大数字如 99999，不利于维护
- 检查父级是否创建了堆叠上下文，影响子元素表现
基本上就这些。掌握 z-index 的关键是理解定位和堆叠上下文的关系，合理组织结构才能精准控制覆盖效果。不复杂但容易忽略细节。
