- 如果一个元素被加了浮动，那么它的层级高于普通元素
<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，但是事实上它并与参与元素间层级的比较（因为它没有加定位属性）
- 如果一个元素被加上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，它的层级也高于浮动元素
- 一个元素被加定位属性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后，它跑到了橙色的下面
