CSS中z-index不生效的原因和解决办法

z-index 属性不生效的原因通常是由于堆叠上下文的创建和管理。创建新的堆叠上下文之后，新的堆叠上下文会覆盖之前的堆叠上下文，新的堆叠上下文中，元素之前所设置的z-index属性会被重置为默认值。而且，即使在新的堆叠上下文中，重新设置了该堆叠上下文中元素的z-index属性值， z-index: -1;也不会生效。所以，首先，我们要了解一下堆叠上下文的概念，然后再讲解如何解决。

1.堆叠上下文（Stacking Context）：

创建堆叠上下文的条件

以下是一些创建新的堆叠上下文的常见条件：
- 根元素（HTML元素）
- 设置了z-index且position为relative、absolute、fixed或sticky的元素
- opacity值小于1的元素
- transform值不为none的元素
- filter值不为none的元素
- will-change属性指定了特定的CSS属性
- isolation属性设置为isolate的元素
堆叠顺序规则

在同一个堆叠上下文中，元素的堆叠顺序遵循以下规则：
- 根堆叠上下文的背景和边框
- 负z-index的堆叠子上下文及其子元素
- 正常流中的块级元素及其子元素
- 正常流中的浮动元素及其子元素
- inline块元素及其子元素
- 正z-index的堆叠子上下文及其子元素
- 示例
  
  以下是一个简单示例，展示如何通过不同的CSS属性创建和控制堆叠上下文：
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>堆叠上下文示例</title><style>.parent {position: relative;z-index: 1;background-color: lightblue;width: 200px;height: 200px;}.child {position: absolute;z-index: 2;background-color: lightcoral;width: 100px;height: 100px;top: 50px;left: 50px;}.sibling {position: relative;z-index: 3;background-color: lightgreen;width: 100px;height: 100px;top: -150px;left: 150px;}</style>
</head>
<body><div class="parent">Parent<div class="child">Child</div></div><div class="sibling">Sibling</div>
</body>
</html>
```
  在这个示例中：
  - .parent元素创建了一个新的堆叠上下文。
  - .child元素在其父元素的堆叠上下文中，因此即使它有较高的z-index，也不会超越parent之外的元素。
  - .sibling元素具有更高的z-index，并且在另一个堆叠上下文中，因此它会在parent元素之上显示。
  通过引入堆叠上下文，CSS使得开发者能够更精确地控制元素的显示层次，确保网页布局和设计符合预期。

2.默认堆叠顺序：

默认情况下，元素的堆叠顺序由其在文档中的顺序决定。如果没有显式设置 z-index，浏览器会根据文档流决定堆叠顺序。

3.父子关系：

子元素的 z-index 只在其父元素的堆叠上下文中有效。如果父元素不在同一个堆叠上下文中，子元素的 z-index 设置将不会影响其他父元素的子元素。

4.解决 `z-index` 不生效的方法

检查和管理堆叠上下文：
- 确保理解哪些元素创建了新的堆叠上下文。调整这些元素的属性，避免不必要的新堆叠上下文。
显式设置 z-index：
- 明确设置 z-index 值，并确保在同一个堆叠上下文中使用这些值。
调整元素的 position 属性：
- 使用 position: relative, position: absolute, 或 position: fixed 明确定位元素，并设置 z-index 值。
使用 transform、opacity 等属性时谨慎处理：
- 注意这些属性会创建新的堆叠上下文，如果必须使用这些属性，确保在同一个堆叠上下文内管理 z-index。

5.示例和具体策略

示例一：不同堆叠上下文导致 `z-index` 不生效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Stacking Context Example</title><style>.parent1, .parent2 {position: relative;width: 200px;height: 200px;margin: 20px;}.parent1 {background-color: lightblue;z-index: 1; /* 不会影响到 parent2 中的子元素 */}.parent2 {background-color: lightgreen;z-index: 2; /* 覆盖 parent1 */}.child {position: absolute;width: 100px;height: 100px;background-color: red;top: 50px;left: 50px;}.parent1 .child {z-index: 3; /* 在 parent1 内部有效 */}.parent2 .child {z-index: 4; /* 在 parent2 内部有效 */}</style>
</head>
<body><div class="parent1"><div class="child"></div></div><div class="parent2"><div class="child"></div></div>
</body>
</html>

在这个例子中，parent1 和 parent2 创建了不同的堆叠上下文，parent2 会覆盖 parent1，但它们各自的子元素的 z-index 只在其父元素的堆叠上下文中有效。

示例二：解决方法

在同一堆叠上下文中使用 z-index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Stacking Context Solution</title><style>.parent {position: relative;width: 200px;height: 200px;background-color: lightgray;margin: 20px;}.child1, .child2 {position: absolute;width: 100px;height: 100px;top: 50px;left: 50px;}.child1 {background-color: lightblue;z-index: 3; /* 子元素在同一个堆叠上下文中 */}.child2 {background-color: lightgreen;z-index: 4; /* 子元素在同一个堆叠上下文中 */}</style>
</head>
<body><div class="parent"><div class="child1"></div><div class="child2"></div></div>
</body>
</html>

在这个例子中，所有的子元素都在同一个堆叠上下文中，z-index 现在可以正常生效。

避免不必要的 transform 属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Avoid Unnecessary Transform</title><style>.parent {position: relative;width: 200px;height: 200px;background-color: lightgray;margin: 20px;}.child {position: absolute;width: 100px;height: 100px;background-color: lightblue;top: 50px;left: 50px;z-index: 3; /* 在同一个堆叠上下文中生效 */}.parent:hover .child {transform: translateY(10px); /* 如果需要移动，可以避免创建新堆叠上下文 */}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>

在这个例子中，child 元素在 hover 时使用 transform 移动，但仍然在同一个堆叠上下文中，确保 z-index 属性生效。

关键点总结

了解堆叠上下文的创建：识别哪些属性会创建新的堆叠上下文，并了解它们对 z-index 的影响。
管理堆叠顺序：确保在同一个堆叠上下文内正确使用 z-index 值，以达到预期效果。
检查元素属性：如果 z-index 不生效，检查元素是否创建了新的堆叠上下文，调整属性如 position、opacity、transform 等。
避免不必要的堆叠上下文：尽量减少不必要的堆叠上下文创建，使用其他方法如 translate 等实现视觉效果。