1、z-index讲解

• z-index是专为定位属性服务的！

• z-index只作用于带有定位属性的元素，position：static没有z-index

• 所有带有定位属性的元素 都是具有层级的！并且先写的定位属性的元素会被后写的定位属性的元素覆盖！

  
  

2、z-index提供了3个参数

• auto：网页中的默认属性 即不产生任何作用

• number：可设置层级的大小number数字越大 层级越大

• inherit：继承

3、注意点

• z-index可以设置元素叠加顺序，但是依赖于定位元素。我们一旦给z-index设置成负，它将会被普通流中的元素所覆盖

• 1、在标准流中表现的层级关系代码示例：
  

• <style>
    .div1{
            width:100px;
          height:100px;
          background:red;
    }
    .div2{
            width:100px;
          height:100px;
          background:blue;
          margin-top:-50px;
    }
  </style>
  <div class="div1"></div>
  <div class="div2"></div>

运行效果：

所以说，在普通元素中也是具有层级关系的！！！

• 2、通过设置z-index改变层级关系代码实例：

• <style>
    .div1{
            width:100px;
          height:100px;
          background:red;
          z-index:1;
    }
    .div2{
            width:100px;
          height:100px;
          background:blue;
          margin-top:-50px;
    }
  </style>
  <div class="div1"></div>
  <div class="div2"></div>

  运行效果：

所以说，可以通过设置z-index大小改变层级！！！