CSS：定位的叠放次序

最新推荐文章于 2024-11-14 17:40:35 发布

听海边涛声

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量279

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/140963958

版权

定位的叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。

语法：

选择器 {
  z-index: 1;
}

数值可以是正整数、负整数或0，默认是auto。数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来居上。
数字后面不能加单位。
只有定位的盒子才有z-index属性。

示例

三个盒子都没有加定位，是标准流

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* position: absolute;
      top: 0;
      left: 0; */
      width: 200px;
      height: 200px;
    }

    .laoda {
      background-color: red;
    }

    .laoer {
      background-color: green;
    }

    .laosan {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box laoda">老大</div>
  <div class="box laoer">老二</div>
  <div class="box laosan">老三</div>
</body>

</html>

在这里插入图片描述

三个盒子都是绝度定位，没有加z-index

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
    }

    .laoda {
      background-color: red;
    }

    .laoer {
      background-color: green;
    }

    .laosan {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box laoda">老大</div>
  <div class="box laoer">老二</div>
  <div class="box laosan">老三</div>
</body>

</html>

在这里插入图片描述

三个盒子都是绝度定位，给其中一个盒子加上`z-index: 1;`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
    }

    .laoda {
      background-color: red;
      z-index: 1;
    }

    .laoer {
      background-color: green;
      left: 50px;
      top: 50px;
    }

    .laosan {
      background-color: blue;
      top: 100px;
      left: 100px
    }
  </style>
</head>

<body>
  <div class="box laoda">老大</div>
  <div class="box laoer">老二</div>
  <div class="box laosan">老三</div>
</body>

</html>