CSS层级优先级z-index

在CSS中，z-index属性用于定义元素在堆叠顺序中的层级关系。当多个元素发生重叠时，z-index属性可以控制这些元素的显示顺序。在处理网页布局时，了解z-index的优先级规则是非常重要的。

1. 基本概念

在HTML文档中，元素是按照其在DOM结构中的顺序依次堆叠在一起的。这种堆叠顺序是根据元素在DOM树中的位置来确定的。如果多个元素发生重叠，那么位于后面的元素会覆盖位于前面的元素。

在这种情况下，z-index属性可以用来控制元素的显示顺序。z-index属性的值是一个整数，表示元素在堆叠顺序中的层级关系，值越大的元素会显示在值较小的元素的上面。如果两个元素的z-index值相同，那么它们的显示顺序仍然取决于它们在DOM结构中的位置。

2. 层级优先级

在CSS中，z-index属性的优先级规则如下：

父元素的z-index属性会影响到其子元素的层叠顺序，子元素的z-index值不能超过父元素的z-index值。
z-index值为负数的元素会被放置在普通流元素的下面。
z-index值为0的元素会被放置在正常流元素的上面。
z-index值为正数的元素会被放置在z-index值为0的元素的上面。
绝对定位元素的z-index值会覆盖非定位元素的z-index值。
高于其他元素的层级关系优先级依次是：固定定位元素 > 绝对定位元素 > 浮动元素 > 非定位元素。

3. 示例代码

下面是一个简单的示例代码，演示了z-index属性的使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-index Example</title>
<style>
    .parent {
        position: relative;
        z-index: 1;
    }
    .child1 {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: red;
        z-index: 2;
    }
    .child2 {
        position: absolute;
        top: 70px;
        left: 70px;
        width: 100px;
        height: 100px;
        background-color: blue;
        z-index: 1;
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

在这个示例中，.parent元素设置了z-index为1，.child1元素设置了z-index为2，.child2元素设置了z-index为1。根据层级优先级规则，.child1元素会显示在.child2元素的上面。