关于z-index

1. 如果一个元素被加了浮动，那么它的层级高于普通元素

<div id='div1'></div>
<div id='div2'></div>

#div1{
  width:100px;
  height:100px;
  background-color:red;
  float:left;
  opacity:0.3
}
#div2{
  width:50px;
  height:50px;
  background-color:blue;
}

以上代码在一个加了浮动的div后面跟一个普通的div，在浏览器中后者会跑到前者的下面

如果蓝色div上面有文字，文字会和红色div处于同一层级

 <div id='div1'></div>
 <div id='div2'>123</div>

#div1{
  width:50px;
  height:50px;
  background-color:red;
  float:left;
}
#div2{
  width:100px;
  height:100px;
  background-color:blue;
}

这时我们来看看div1的z-index是多少

console.log($('#div1').css('z-index'));
'auto'

虽然div1的层级确实高于div2，但是事实上它并与参与元素间层级的比较（因为它没有加定位属性）

2. 如果一个元素被加上position:absolute或者position:fixed,那么它的层级高于普通元素（也高于浮动元素）

#div1{
  width:50px;
  height:50px;
  background-color:green;
  position: absolute;
  z-index:0;
  opacity:0.4;
}
#div2{
  width:100px;
  height:100px;
  float:left;
  background-color:orange;
}

以上可以看出：即使设置div1的z-index为0，它的层级也高于浮动元素

3. 一个元素被加定位属性absolute或者fixed,如果设置它的z-index为负数，他会位于它下面元素的下面

#div1{
  width:50px;
  height:50px;
  background-color:green;
  position: fixed;
  opacity:0.4;
  z-index:-1;
}
#div2{
  width:100px;
  height:100px;
  background-color:orange;
  opacity:0.3
}

绿色本来在橙色得到上面，给绿色加了z-index=-1后，它跑到了橙色的下面