CSS 绝对定位（position absolute）的z-index高于固定定位（position fixed）

在本文中，我们将介绍CSS中绝对定位（position absolute）具有比固定定位（position fixed）更高的z-index的情况。

阅读更多：CSS 教程

了解绝对定位和固定定位

在CSS中，绝对定位和固定定位都是常用的定位属性，用于控制元素在页面中的位置。

绝对定位（position absolute）

绝对定位使元素脱离文档流，并相对于其最近的非静态定位（position值为static以外的元素）的父元素进行定位。我们可以使用top、right、bottom和left属性来调整元素的位置。

#example {
    position: absolute;
    top: 50px;
    left: 100px;
}

在上面的示例中，元素”example”将相对于其最近的非静态定位的父元素进行定位，并且其顶部与父元素的顶部相隔50像素，左侧与父元素的左侧相隔100像素。

固定定位（position fixed）

固定定位使元素相对于浏览器窗口进行定位，即使页面滚动也不会改变元素的位置。我们同样可以使用top、right、bottom和left属性来设置元素的位置。

#example {
    position: fixed;
    top: 50px;
    left: 100px;
}

上述示例中的元素”example”将在浏览器窗口中以50像素的距离顶部和100像素的距离左侧的位置固定显示。

绝对定位的z-index高于固定定位

当绝对定位的元素和固定定位的元素重叠时，绝对定位的元素会覆盖在固定定位的元素之上，并且具有比固定定位元素更高的z-index。

让我们来看一个例子：

<div class="container">
    <div class="overlay"></div>
    <div class="sticky"></div>
</div>

.container {
    position: relative;
    height: 500px;
    background-color: #f2f2f2;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sticky {
    position: fixed;
    top: 200px;
    left: 50px;
    width: 200px;
    height: 100px;
    background-color: #fff;
    z-index: 0;
}

在上述示例中，有一个包含两个元素的容器。一个元素有绝对定位，另一个元素有固定定位。绝对定位的元素是一个遮罩层（overlay），固定定位的元素是一个粘性元素（sticky）。遮罩层被设置为黑色半透明，并具有z-index为1，而粘性元素的z-index为0。

当页面滚动时，遮罩层（绝对定位）将覆盖在粘性元素（固定定位）之上。这是因为z-index值为1的遮罩层具有更高的堆叠顺序。

总结

在CSS中，绝对定位（position absolute）的z-index高于固定定位（position fixed）。使用z-index属性可以控制元素的堆叠顺序，较高的数值将覆盖较低的数值。当绝对定位的元素和固定定位的元素重叠时，具有较高z-index值的元素将覆盖较低z-index值的元素。要注意使用适当的z-index值，以确保元素正确显示和重叠。

希望本文对你理解CSS中绝对定位和固定定位的z-index有所帮助。使用恰当的z-index值能够有效控制元素的层叠关系，让页面呈现出更好的视觉效果。