CSS 绝对 z 索引小于

在 CSS 中，当我们想要一个元素跨越其它元素站在前面，我们可以使用 z-index 属性来控制它在垂直层面上的位置。

通常情况下 z-index 的值越大，元素就会跨越其它元素站在前面。但是，当 z-index 的值为负数时，它与未设置 z-index 的元素相比就更靠近屏幕的背景啦！

语法

selector {
    z-index: int | auto | initial | inherit;
}

• int：数字值，默认值为 0。
• auto：浏览器会为元素自动计算 z-index 值。
• initial：将属性设置为默认值（0）。
• inherit：继承父元素的 z-index 值。

使用示例

假设我们有以下 HTML 结构：

<div class="layer-1">
    <p>这是一段文字在 layer-1 内。</p>
    <div class="layer-2">
        <p>这是一段文字在 layer-2 内。</p>
        <div class="layer-3">
            <p>这是一段文字在 layer-3 内。</p>
        </div>
    </div>
</div>

现在我们想要给 .layer3 设置 z-index，使得它跨越 .layer-2 和 .layer-1，我们可以这样写：

.layer-3 {
    z-index: 1;
}

.layer-2 {
    z-index: 0;
}

.layer-1 {
    z-index: 0;
}

这里我们把 z-index 按照层级从上到下分别设为 1、0、0，这样 .layer-3 就可以跨越其它元素站在前面了。

注意事项

• z-index 只对定位元素起作用，要想使用 z-index，必须先给元素设置定位属性，例如 position: relative;。
• z-index 同样只对有层叠上下文的元素起作用，如果要设置 z-index，必须先判断元素是否有层叠上下文，可以通过 z-index 是否为 auto 来判断。可以通过 will-change: transform; （其他属性也可以）来创建新的层叠上下文（前提是当前元素必须是定位元素）。

希望这篇文章能够帮助你更好地掌握 z-index 属性。