前言:

我们有的时候,希望下方的内容能够显示到上方,达到类似于多个图层的效果,此时我们可以利用z-index这个属性。

介绍;

z-index属性值是用来设置元素的堆叠顺序(元素层级)。

覆盖原则:

 <1>特殊情况

默认(或者position:static)情况下,z-index会失效,因此我们不会在此情况中使用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>
      .a{
         z-index: 1;
         width: 200px;
         height: 200px;
         position: static;
         background-color: aqua;
      }
      .b{
         z-index: 100;
         background-color: rgb(222, 135, 135);
      }
   </style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

CSS之显示覆盖内容(z-index)-LMLPHP

<2>同级元素之间

z-index级别大的在上,级别小的在下,z-index的默认值是0.

<!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>
      .a{
         z-index: 1;
         width: 300px;
         height: 300px;   
         position:absolute;
         background-color:blue;
      }

      .b{
         width: 200px;
         height: 200px;
         z-index: 100;
         position:absolute;
         background-color: rgb(222, 135, 135);
      }
   </style>
</head>
<body>
   <div class="a"></div>
   <div class="b"></div>
</body>
</html>

CSS之显示覆盖内容(z-index)-LMLPHP

<2>非同级元素

对于非同级的元素,元素根据其父级元素的z-index来判别,与自身的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>
      .a {
         z-index: 12;
         width: 300px;
         height: 300px;
         position: absolute;
         background-color: rgb(96, 96, 140);
      }

      .b {
         width: 200px;
         height: 200px;
         z-index: 1;
         position: absolute;
         background-color: rgb(222, 135, 135);
      }

      .c {
         left: 100px;
         width: 200px;
         height: 200px;
         z-index: 100;
         position: absolute;
         background-color: aqua;
      }

      .d {
         width: 200px;
         height: 200px;
         z-index: 1;
         position: absolute;
         background-color: rgb(169, 36, 36);
      }
   </style>
</head>

<body>
   <div class="a">box1
      <div class="b">
      </div>
   </div>
   <div class="c">box2
      <div class="d">
      </div>
   </div>
</body>

</html>

CSS之显示覆盖内容(z-index)-LMLPHP

05-01 11:38