要调整css层级顺序，关键在于正确使用z-index属性。首先，z-index仅对设置了position为relative、absolute、fixed或sticky的元素有效；其次，z-index值可为正数、负数或auto，数值越大层级越高；最后，未设置z-index时，元素按html出现顺序堆叠，后出现的覆盖前面的。若z-index无效，可能因未设置position属性或陷入层叠上下文限制，此时需调整父级z-index或移出该上下文。调试复杂层级关系时，可用开发者工具查看元素样式，并通过简化问题、添加outline或使用console.log辅助排查。z-index: auto表示不创建新层叠上下文，层叠顺序与父元素一致。负z-index可将元素置于当前上下文背景之后，但无法低于根元素背景。
CSS调整层级顺序，简单来说，就是通过z-index属性来控制元素在垂直于屏幕方向上的堆叠顺序。数值越大，层级越高，越靠近用户。但事情往往没那么简单，还有很多因素会影响最终的显示效果。
解决方案
要理解CSS的层级，需要把握几个关键点。首先，z-index只对定位元素（position: relative, position: absolute, position: fixed, 或 position: sticky）有效。其次，z-index的值可以是正数、负数或零。最后，如果没有设置z-index，元素会按照它们在HTML中的出现顺序堆叠，后面的元素会覆盖前面的元素。
举个例子，假设你有两个div，一个红色，一个蓝色。
立即学习“前端免费学习笔记（深入）”；
<div class="red">Red</div> <div class="blue">Blue</div>
.red {
position: relative;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.blue {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
margin-top: -50px; /* 覆盖红色div */
z-index: 2;
}在这个例子中，蓝色div的z-index大于红色div，所以它会覆盖在红色div上面。如果移除z-index，蓝色div仍然会覆盖红色div，因为它在HTML中出现得更晚。
为什么我的z-index不起作用？
这是个常见问题。最大的可能性就是元素没有设置position属性。z-index只有在position属性值为relative, absolute, fixed, 或 sticky时才生效。
另外一个原因是，你可能陷入了层叠上下文（stacking context）的陷阱。层叠上下文可以理解为一个独立的层叠空间，在这个空间内，元素的z-index值只影响该空间内的层叠顺序。
比如，如果一个父元素设置了position: relative和z-index: 1，那么它的所有子元素都会在这个层叠上下文中。即使子元素的z-index设置得很高，它也无法超越父元素的层叠上下文。要解决这个问题，要么调整父元素的z-index，要么将子元素移出父元素的层叠上下文。
如何调试复杂的层级关系？
当层级关系变得复杂时，调试可能会变得困难。浏览器的开发者工具是一个强大的帮手。你可以使用开发者工具来检查元素的z-index值，以及它是否创建了一个新的层叠上下文。
此外，还可以尝试以下方法：
- 简化问题：逐步移除样式，直到问题消失，从而找到导致层级问题的根源。
-
使用
outline或border：给元素添加outline或border，可以更清晰地看到元素的边界和层叠关系。 -
控制台输出：使用
console.log输出元素的z-index值，以便更好地理解层叠关系。
z-index: auto是什么意思？
当z-index设置为auto时，元素不会创建一个新的层叠上下文，并且它的层叠顺序与父元素相同。简单来说，它会按照HTML中的出现顺序堆叠。如果父元素创建了一个新的层叠上下文，那么z-index: auto的元素也会在这个层叠上下文中，但它的层叠顺序由它在父元素中的位置决定。
如何使用负的z-index？
负的z-index可以用来将元素放置在背景之后。比如，你可以将一个元素放置在其他元素的下方，创建一个背景效果。但需要注意的是，负的z-index只能将元素放置在当前层叠上下文的背景之后，无法超越根元素的背景。
