z-index不起作用的常见原因及解决方法：1. 元素未设置position属性，需确保目标元素及父元素设置为relative、absolute、fixed或sticky；2. 父元素创建了新的层叠上下文，需检查并调整父元素的z-index值；3. z-index值未正确比较，需确保目标元素的z-index大于需覆盖元素；4. html结构影响，后出现的元素会覆盖前者；5. opacity小于1也会创建层叠上下文，需注意其对层叠顺序的影响。
css调整层叠顺序主要依赖z-index属性，但它并非万能。z-index只在定位元素（position属性值为relative、absolute、fixed或sticky）上有效。 此外，层叠上下文也会影响z-index的效果。
解决方案：
要调整元素的层叠顺序，首先确保该元素是定位元素。然后，赋予它一个z-index值。z-index值越大，元素越靠近用户。如果多个元素z-index值相同，则在HTML中后出现的元素会覆盖先出现的元素。
立即学习“前端免费学习笔记（深入）”；
为什么我的z-index不起作用？如何排查？
z-index不起作用通常有几个原因。最常见的是元素没有设置position属性。其次，检查元素的父元素是否创建了新的层叠上下文。如果父元素设置了position: relative且z-index不为auto，那么该父元素就创建了一个新的层叠上下文。这意味着子元素的z-index值只在其父元素内部有效，无法与父元素外部的元素进行比较。
排查步骤：
- 检查position属性： 确保目标元素及其父元素都设置了position属性（relative、absolute、fixed或sticky）。
- 检查层叠上下文： 检查目标元素的父元素是否创建了新的层叠上下文。可以使用浏览器的开发者工具查看元素的Computed样式，查找z-index属性。如果父元素创建了层叠上下文，则需要调整父元素的z-index值。
- 检查z-index值： 确保目标元素的z-index值大于需要覆盖的元素的z-index值。注意，z-index可以是负数。
- HTML结构： 如果z-index值相同，检查HTML结构。后出现的元素会覆盖先出现的元素。
- opacity属性： opacity小于1的元素也会创建层叠上下文。
举个例子，假设有以下HTML结构：
<div class="parent"> <div class="child1">Child 1</div> <div class="child2">Child 2</div> </div> <div class="sibling">Sibling</div>
CSS：
.parent { position: relative; z-index: 1; /* 创建层叠上下文 */ } .child1 { position: relative; z-index: 2; } .child2 { position: relative; z-index: 1; } .sibling { position: relative; z-index: 0; }
在这个例子中，.child1的z-index为2，.child2的z-index为1，但它们都位于.parent这个层叠上下文中。.sibling的z-index为0，虽然小于.child1的z-index，但由于.parent创建了层叠上下文，.sibling会位于.parent之下。
如何利用层叠上下文解决复杂的层叠问题？
理解层叠上下文是解决复杂层叠问题的关键。可以利用层叠上下文将元素分组，并控制整个组的层叠顺序。
例如，假设需要创建一个模态框，并确保它始终位于页面最顶层。可以为模态框的父元素创建一个新的层叠上下文，并赋予一个较高的z-index值。这样，模态框内的所有元素都会位于该层叠上下文之上，而不会受到页面其他元素的层叠顺序影响。
<div class="modal-container"> <div class="modal"> Modal Content </div> </div>
.modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; /* 创建层叠上下文，并赋予最高层叠顺序 */ } .modal { position: relative; background-color: white; padding: 20px; z-index: 1; /* 位于modal-container的层叠上下文之上 */ }
在这个例子中，.modal-container创建了一个新的层叠上下文，并赋予了最高的z-index值。.modal位于.modal-container的层叠上下文之上，因此始终位于页面最顶层。即使页面上有其他元素的z-index值大于.modal的z-index，.modal仍然会显示在最前面。
除了z-index，还有哪些因素会影响层叠顺序？
除了z-index和层叠上下文，还有一些其他因素会影响层叠顺序：
- HTML结构： 在HTML中后出现的元素会覆盖先出现的元素（在z-index值相同的情况下）。
- position属性： 定位元素（position属性值为relative、absolute、fixed或sticky）会覆盖静态元素（position属性值为Static）。
- opacity属性： opacity小于1的元素会创建层叠上下文。
- transform属性： 某些transform属性（例如transform: translateZ(0)）也会创建层叠上下文。
- Filter属性： 某些filter属性（例如filter: blur(1px)）也会创建层叠上下文。
- isolation属性： isolation: isolate会创建一个新的层叠上下文。
理解这些因素有助于更精确地控制元素的层叠顺序。 调试时，可以使用浏览器的开发者工具检查元素的Computed样式，查看影响层叠顺序的属性。 记住，层叠顺序是一个复杂的问题，需要仔细分析和调试才能找到最佳解决方案。
