前端中z-index层叠等级属性是什么意思？

最新推荐文章于 2024-07-16 15:21:30 发布

让你五行代码

最新推荐文章于 2024-07-16 15:21:30 发布

阅读量296

点赞数

分类专栏： Web前端文章标签：前端 css html

本文链接：https://blog.csdn.net/zy1992As/article/details/130947012

版权

Web前端专栏收录该内容

112 篇文章

订阅专栏

在前端开发中，z-index是一个CSS属性，用于控制HTML元素在垂直方向上的层叠顺序。它定义了元素在叠加层中的顺序，具有较高z-index值的元素将位于较低z-index值的元素之上。

　　z-index属性接受整数值和关键字作为值，常用的关键字包括auto、inherit和initial。

　　接下来笔者通过一段HTML代码，来演示下z-index属性的使用：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      position: absolute;
    }

    #box1 {
      background-color: red;
      z-index: 1;
    }

    #box2 {
      background-color: blue;
      z-index: 2;
      left: 50px;
      top: 50px;
    }

    #box3 {
      background-color: green;
      z-index: 3;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
</body>
</html>

　　在上述代码中，我们创建了三个div元素，每个元素具有不同的z-index值。box1元素具有最低的z-index值，box3元素具有最高的z-index值。因此，box3元素将位于其他两个元素的上方，形成层叠效果。

　　请注意，z-index属性只在具有定位(position)属性的元素上生效，如position: absolute、position: relative或position: fixed。如果元素没有显式地设置z-index值，则其默认值为auto，这意味着元素将遵循其在HTML结构中的出现顺序。