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结构：
Child 1Child 2Sibling
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值。这样，模态框内的所有元素都会位于该层叠上下文之上，而不会受到页面其他元素的层叠顺序影响。
Modal Content
.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样式，查看影响层叠顺序的属性。 记住，层叠顺序是一个复杂的问题，需要仔细分析和调试才能找到最佳解决方案。
