CSS 使用 CSS z-index 属性

在本文中，我们将介绍 CSS 中的 z-index 属性以及如何使用它来控制元素的层叠顺序。

阅读更多：CSS 教程

什么是 z-index 属性

z-index 属性用于控制元素在页面上的层叠顺序。它允许我们在一个页面上的不同元素之间创建重叠效果，并决定哪些元素显示在其他元素的前面或后面。

z-index 属性的取值可以是整数、负数或 auto。整数表示元素的层叠顺序，较大的值会使元素显示在较小的值前面；负数表示元素将被放置在默认的层叠顺序之后；而 auto 表示元素使用默认的层叠顺序。

如何使用 z-index 属性

要使用 z-index 属性，我们需要将其应用于需要进行层叠操作的元素上。通常情况下，只需添加一个合适的 z-index 值即可实现我们所期望的层叠效果。

例如，我们可以在 CSS 中添加以下代码来设置一个带有 z-index 属性的元素：

.element {
  position: relative;
  z-index: 2;
}

在这个例子中，我们设置了一个名为 “element” 的元素的 z-index 值为 2。这意味着它将显示在默认层叠顺序的元素之前。

另外，我们还可以将 z-index 属性与其他定位属性（如 position、top、left 等）一起使用，来更精确地控制元素的层叠效果。

以下是一个示例，演示如何使用 z-index 属性来使元素重叠并控制它们的显示顺序：

<!DOCTYPE html>
<html>
<head>
<style>
  .box1 {
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
  }
  .box2 {
    width: 150px;
    height: 150px;
    background-color: blue;
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2;
  }
  .box3 {
    width: 150px;
    height: 150px;
    background-color: green;
    position: absolute;
    top: 110px;
    left: 110px;
    z-index: 3;
  }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>
</html>

在这个示例中，我们创建了三个不同颜色的方块元素，每个元素都有不同的 z-index 值。由于每个元素的 z-index 值不同，它们会以不同的层叠顺序叠加在一起，形成重叠的效果。

z-index 的注意事项

在使用 z-index 属性时，需要注意以下几点：

只有具有定位属性（position 为 relative、absolute、fixed 或 sticky）的元素才能生效。对于没有定位属性的元素，无论设置何种 z-index 值都不会有任何效果。
z-index 只在同一级别的元素之间才会生效。如果一个元素的父级元素具有更高的 z-index 值，那么即使子元素的 z-index 值很高，它也无法显示在父级元素之前。