z-index生效需元素设置非static的position属性，且值越大层级越高，但受层叠上下文限制。1. 层叠上下文由根元素、定位元素结合z-index、transform、opacity等属性创建，独立影响内部元素层级；2. z-index无效常见原因包括未设position属性、处于不同层叠上下文、父元素overflow裁剪等；3. 调试时应检查position与层叠上下文，逐步调整z-index并借助开发者工具；4. 其他影响层叠顺序的因素包括html顺序、position类型、opacity与transform属性；5. 避免滥用z-index应优先用结构布局控制层级，必要时使用小数值并统一管理。
CSS层叠顺序，说白了就是决定哪些元素显示在上面，哪些元素显示在下面。它不是一个简单的“先来后到”的规则，而是一套复杂的算法，需要理解才能真正掌握。
控制层叠顺序，主要靠z-index属性，但它不是万能的。z-index只有在position属性值为relative、absolute、fixed或sticky时才生效。而且，z-index的值越大，元素就越靠上，但不同层叠上下文中的z-index值是相互独立的。
如何理解CSS层叠上下文？
层叠上下文是理解z-index的关键。可以把它想象成一个独立的舞台，舞台上的演员（元素）根据他们的z-index值决定站位。不同的舞台之间互不干扰。
立即学习“前端免费学习笔记（深入）”；
以下情况会创建新的层叠上下文：
- 根元素（
） -
position值为relative、absolute、fixed或sticky且z-index值不为auto的元素 -
position值为sticky的元素（对于某些浏览器） -
display值为flex或inline-flex的元素的子元素，且z-index值不为auto -
opacity值小于1的元素 -
transform值不为none的元素 -
filter值不为none的元素 -
isolation值为isolate的元素 -
will-change指定了任意属性（即使你指定的属性实际上没有改变） -
contain值为layout、paint或strict的元素
理解了层叠上下文，就能更好地控制z-index。举个例子，如果一个元素的z-index值很大，但它的父元素创建了一个新的层叠上下文，那么这个元素也只能在这个父元素的层叠上下文中“称霸”，无法超越父元素。
为什么z-index有时候不起作用？
z-index不起作用，通常是因为以下几个原因：
- 元素没有设置
position属性，或者position属性值为static（默认值）。 - 元素位于不同的层叠上下文中，
z-index只能在同一个层叠上下文中起作用。 - 元素的
z-index值与其他元素相同，此时会按照元素在HTML中的顺序决定层叠顺序（后来者居上）。 - 父元素的
overflow属性设置为hidden、scroll或auto，可能会裁剪超出部分，导致z-index失效。
解决这个问题，需要仔细检查元素的position属性、z-index值，以及它所在的层叠上下文。
如何使用z-index进行调试？
调试z-index问题，可以尝试以下方法：
-
检查
position属性： 确保需要调整层叠顺序的元素设置了position属性，并且值不是static。 -
检查层叠上下文： 使用浏览器的开发者工具，查看元素的层叠上下文。可以通过查看元素的
computed样式，找到创建层叠上下文的属性。 -
逐步调整
z-index值： 尝试逐步增加或减少z-index的值，观察元素层叠顺序的变化。 - 使用开发者工具： 浏览器的开发者工具通常会显示元素的层叠顺序，可以帮助你快速定位问题。
举个例子，我曾经遇到一个问题，一个模态框始终无法显示在最上层。检查后发现，模态框的父元素设置了transform: translate3d(0, 0, 0)，这创建了一个新的层叠上下文。最终，我通过调整父元素的z-index值，才解决了这个问题。
除了z-index，还有哪些因素影响层叠顺序？
除了z-index，以下因素也会影响层叠顺序：
-
元素在HTML中的顺序： 在同一个层叠上下文中，
z-index值相同的元素，会按照在HTML中的顺序决定层叠顺序。 -
元素的
position属性：position值为relative、absolute、fixed或sticky的元素，会覆盖position值为static的元素。 -
元素的
opacity值：opacity值小于1的元素，会创建新的层叠上下文。 -
元素的
transform属性：transform值不为none的元素，会创建新的层叠上下文。
了解这些因素，可以更全面地掌握层叠顺序的控制。
如何避免z-index滥用？
过度使用z-index会导致代码难以维护。建议遵循以下原则：
-
尽量减少
z-index的使用： 优先考虑使用HTML结构和CSS布局来控制元素的层叠顺序。 -
只在必要时使用
z-index： 只有当需要调整元素的层叠顺序，并且无法通过其他方式实现时，才使用z-index。 -
避免使用过大的
z-index值： 使用较小的z-index值，例如1、2、3，可以避免与其他元素的z-index值冲突。 -
使用CSS变量管理
z-index： 可以使用CSS变量来统一管理z-index值，方便维护和修改。
z-index就像一把双刃剑，用好了可以解决问题，用不好会带来麻烦。理解它的原理，谨慎使用，才能真正发挥它的作用。
