17370845950

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 显示在最上面：

红色块
蓝色块

这里蓝色块的 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 的关键是理解定位和堆叠上下文的关系，合理组织结构才能精准控制覆盖效果。不复杂但容易忽略细节。