举例详解CSS的z-index属性的使用

下面是“举例详解CSS的z-index属性的使用”的完整攻略。

什么是z-index属性

z-index是CSS的一个属性，用来定义HTML元素的层级关系，决定哪些元素在前面，哪些元素在后面。

z-index的取值范围

值得注意的是，z-index的取值是一个整数，它的取值范围是必须是一个整数, 取值范围是-2147483648到2147483647，可以是负数、零或正数。

z-index的工作原理

每个HTML元素按照它们的位置顺序放置在不同的图层上，z-index属性接着决定哪个元素会覆盖哪个元素。z-index属性值大的元素会前置在屏幕上，而z-index属性值小的元素则后置在屏幕上。

z-index语法

selector {
  z-index: value;
}

CSS的z-index属性的使用举例说明

例一：z-index属性的初始值是auto

当元素的z-index属性值初始时，它的值是auto。这时候，HTML元素的层叠顺序就由HTML的Dom结构来决定。

<div>
  <p>这是一个p标签</p>
</div>
<div>
  <p>这是第二个p标签</p>
</div>

在上面HTML代码中，第一个p标签是位于第一个div里面的，第二个p标签是位于第二个div里面的，这时候第一个p标签就会显示在第二个p标签的上面。

例二：z-index属性的值不是auto

当元素的z-index属性值不是auto时，层叠顺序就不再受到HTML Dom结构的限制。如果两个HTML元素同时有z-index属性值，则具有更高z-index属性值的元素会在前面显示。

<style>
  .one {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 10;
    background-color: red;
  }
  .two {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 20;
    background-color: green;
  }
  .three {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 30;
    background-color: blue;
  }
</style>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

在上面的代码中，div.two的z-index属性值是20，比div.one和div.three的属性值都高。因此，div.two会覆盖div.one和div.three，在屏幕上看起来就像div.two是最前面的。而div.one和div.three都同时有z-inex属性，但是因为div.three的属性值最高，因此div.three又会覆盖div.one，所以最后在屏幕上展示的就是div.three、div.two和div.one。

总之，z-index属性对元素的层叠顺序有决定性作用，能够帮助我们更好地控制网页布局。