CSS中的z-index属性详解

描述
z-index是CSS中控制元素在垂直于屏幕方向（Z轴）上堆叠顺序的属性。它决定了当元素重叠时，哪个元素显示在前面，哪个元素被遮盖在后面。

核心概念

1. 堆叠上下文：z-index只在特定的"堆叠上下文"中生效
2. 默认顺序：HTML中后出现的元素会覆盖先出现的元素
3. 数值特性：z-index值越大，元素越靠前；值可以为正数、负数或auto

z-index的基本使用

.element1 {
    position: relative;
    z-index: 10;  /* 显示在前面 */
}

.element2 {
    position: relative;  
    z-index: 5;   /* 显示在后面 */
}

关键知识点详解

1. z-index生效的前提条件
z-index只在定位元素（position值不为static）上生效：

• position: relative/absolute/fixed/sticky
• 弹性盒子（flex）的子项
• 网格布局（grid）的子项

2. 堆叠上下文的创建
以下情况会创建新的堆叠上下文：

• 根元素（html）
• position为absolute/relative且z-index不为auto
• position为fixed/sticky
• flex/grid容器的子项且z-index不为auto
• opacity值小于1
• transform、filter、perspective、clip-path等属性不为none

3. 堆叠规则（从后到前）

1. 堆叠上下文的背景和边框
2. z-index为负的子堆叠上下文
3. 正常流中的非定位块级元素
4. 非定位的浮动元素
5. 正常流中的非定位内联元素
6. z-index为auto或0的定位元素
7. z-index为正的子堆叠上下文

4. 实际应用示例

<div class="parent">
    <div class="child1">子元素1</div>
    <div class="child2">子元素2</div>
</div>

.parent {
    position: relative;
    z-index: 1; /* 创建堆叠上下文 */
}

.child1 {
    position: absolute;
    z-index: 100; /* 在parent的上下文中比较 */
}

.child2 {
    position: absolute;  
    z-index: 50; /* 仍然在child1后面 */
}

5. 常见问题解决

问题1：z-index不生效
原因：元素没有定位或处于不同的堆叠上下文
解决：确保元素有定位属性，且在同一堆叠上下文中比较

问题2：父元素遮盖子元素
原因：父元素创建了堆叠上下文且z-index较小
解决：调整父元素的z-index或重新组织HTML结构

6. 最佳实践

1. 避免滥用高z-index值，建议使用有意义的数值段
2. 使用CSS变量管理z-index层级
3. 注意堆叠上下文的创建，避免意外的层级关系

通过理解z-index的工作原理和堆叠上下文的概念，可以更好地控制页面元素的显示层级关系。