z-index控制元素堆叠顺序，但需配合position使用，且受堆叠上下文限制，创建新堆叠上下文的元素会隔离子元素层级，合理规划z-index范围和避免滥用可减少混乱。
CSS层级管理，简单来说，就是控制页面元素在垂直方向上的堆叠顺序，谁在上，谁在下。核心在于理解和运用
z-index属性，但它并非万能钥匙，还需结合定位属性（
position）才能发挥作用。
CSS的zindex层级管理指南
在CSS中，
z-index属性用于控制元素在z轴上的堆叠顺序。数值越大，元素越靠近观察者，也就越在上面。但是，
z-index只对设置了
position属性（
relative,
absolute,
fixed,
sticky）的元素有效。
如果多个元素具有相同的
z-index值，那么它们在DOM结构中的顺序决定了它们的堆叠顺序：后面的元素会覆盖前面的元素。
如何理解堆叠上下文（Stacking Context）？
堆叠上下文是理解
z-index的关键。可以把它想象成一个独立的“图层”。每个堆叠上下文都有自己的
z-index排序。
立即学习“前端免费学习笔记（深入）”；
以下情况会创建新的堆叠上下文：
- 根元素 (HTML)
position
值为absolute
或relative
，且z-index
值不为auto
的元素position
值为fixed
或sticky
的元素opacity
值小于1的元素transform
值不为none
的元素filter
值不为none
的元素isolation
值为isolate
的元素will-change
指定了任意属性的元素contain
值为layout
,paint
或strict
的元素
一个元素一旦创建了新的堆叠上下文，它的所有子元素都会相对于这个堆叠上下文进行堆叠，而不再受父级堆叠上下文的影响。 这意味着，即使一个子元素的
z-index值很高，它也无法超越其父级堆叠上下文的边界。
举个例子：
<div style="position: relative; z-index: 1;">
父元素
<div style="position: absolute; z-index: 1000;">
子元素
</div>
</div>
<div style="position: relative; z-index: 0;">
兄弟元素
</div>在这个例子中，即使子元素的
z-index设置为1000，它也无法覆盖兄弟元素，因为父元素的
z-index值为1，而兄弟元素的
z-index值为0。子元素只在其父元素的堆叠上下文中有效。
如何避免z-index混乱？
z-index管理不当容易导致层级混乱，难以维护。以下是一些建议：
-
尽量避免滥用
z-index
： 只有在必要时才使用z-index
，避免为所有定位元素都设置z-index
。 -
维护一个
z-index
变量表： 为不同的组件或模块定义明确的z-index
范围，例如，Modal的z-index
范围是1000-1999，Tooltip的z-index
范围是2000-2999。这样可以避免不同组件之间的z-index
冲突。 -
合理利用堆叠上下文： 通过创建新的堆叠上下文来隔离不同的组件，避免
z-index
值的相互影响。 -
避免使用过大的
z-index
值： 过大的z-index
值（例如9999）可能会导致难以调试和维护。尽量使用相对较小的z-index
值，并通过堆叠上下文来控制层级关系。 -
注意
opacity
、transform
等属性的影响： 这些属性会创建新的堆叠上下文，可能会影响z-index
的行为。
如何调试z-index问题？
当遇到
z-index问题时，可以使用浏览器的开发者工具进行调试。
-
检查元素的
position
属性： 确保元素设置了position
属性，并且值为relative
,absolute
,fixed
或sticky
。 -
检查元素的
z-index
值： 确保元素的z-index
值设置正确。 - 检查元素的堆叠上下文： 确定元素是否创建了新的堆叠上下文，以及它的父级堆叠上下文是什么。
- 使用开发者工具的“Layers”面板： Chrome和Firefox的开发者工具都提供了“Layers”面板，可以可视化地查看页面的堆叠上下文和元素的堆叠顺序。
z-index的“auto”值意味着什么？
当元素的
z-index值为
auto时，它不会创建新的堆叠上下文。元素会继承其父元素的堆叠上下文，并在该上下文中按照DOM顺序进行堆叠。这通常意味着该元素会与其兄弟元素按照它们在HTML中的顺序堆叠。
动态改变z-index有什么需要注意的？
在JavaScript中动态改变
z-index时，需要特别小心。频繁地修改
z-index可能会导致性能问题，特别是当页面包含大量元素时。 此外，动态改变
z-index可能会导致意想不到的层级冲突，需要仔细测试。 更好的做法是，尽量避免动态修改
z-index，而是通过改变元素的
position属性或使用CSS类来控制元素的显示和隐藏。
为什么我的z-index不起作用？
z-index不起作用通常有以下几个原因：
-
元素没有设置
position
属性：z-index
只对设置了position
属性的元素有效。 -
元素的
position
属性值为static
：position: static
是元素的默认值，z-index
对position: static
的元素无效。 -
元素的
z-index
值太小： 元素的z-index
值小于其兄弟元素的z-index
值。 -
元素位于不同的堆叠上下文中： 元素位于不同的堆叠上下文中，其
z-index
值只在其自身的堆叠上下文中有效。 -
元素的父元素设置了
overflow: hidden
：overflow: hidden
可能会裁剪掉超出父元素边界的元素，即使该元素的z-index
值很高。 -
其他CSS属性的影响： 某些CSS属性（例如
opacity
,transform
,filter
）会创建新的堆叠上下文，可能会影响z-index
的行为。
