CSS z-index层重叠顺序

z-index用来设置position不为默认的值，才有效。

语法

z-index设置层级，数值越高显示的越靠前，需要注意的是z-index不需要添加任何单位。

p{
position:relative;
z-index:100;
}

设置无效的情况

一般新手朋友经常会出现为什么设置z-index没有效果的情况，一般这样的情况是因为没有设置position的值。

实际应用案例

html代码如下：

<div class="containe">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

CSS样式如下：

*{
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    .containe{
      width: 600px;
      font-size: 0;
      margin: 0 auto;
      background: gray;
      height: 300px;
      position: relative;
    }
    .div1{
      width: 50px;
      height: 50px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: red;
      z-index: 10;
    }
    .div2{
      width: 50px;
      height: 50px;
      position: absolute;
      left: 10px;
      top: 0;
      background-color: orange;
      z-index: 20;
    }
    .div3{
      width: 50px;
      height: 50px;
      position: absolute;
      left: 20px;
      top: 0;
      background-color: blue;
      z-index: 30;
    }

实现效果如下：

可以看到z-index值最大的div3将会覆住所有的盒子，DOM重叠的时候z-index大的将会盖住z-index低的DOM。