前面的話
對於所有定位，最後都不免遇到兩個元素試圖放在同一位置上的情況。顯然，其中一個必須蓋住另一個。但，如何控制哪個元素放在上層，這就引入了屬性z-index
定義
利用z-index，可以改變元素相互覆蓋的順序。這個屬性的名字由座標系統得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個座標系中，較高z-index值的元素比較低z-index值的元素離用戶更近，這會導致較高z-index值的元素覆蓋其他元素，這也稱爲堆疊或疊放
z-index
值: <integer> | auto | inherit
初始值: auto
應用於: 定位元素
繼承性: 無
[注意]z-index應用於定位元素是CSS2的規範，到了CSS3標準，z-index的應用範圍擴大了不少
[注意]所有整數都可以作爲z-index的值，包括負數。如果爲元素指定一個負z-index值，會將其移到離讀者更遠的位置，會移到疊放棧的更低層
堆疊規則
對於CSS2.1來說，頁面元素的堆疊規則如下圖所示:
定位元素的堆疊規則
[1]對於定位元素(position不是static的元素)來說，不設置z-index或z-index相同時，後面元素覆蓋前面元素
[2]對於處於同一堆疊上下文中的同一層次的元素來說，默認z-index較大值覆蓋z-index較小值
堆疊上下文
一旦爲一個元素指定了z-index值(不是auto)，該元素會建立自己的局部堆疊上下文。這意味着，元素的所有後代相對於該祖先元素都有其自己的疊放順序
[注意]auto值指當前堆疊上下文中生成的棧層次與其父框的層次相同，這個框不會建立新的局部疊放上下文。z-index:auto與z-index:0的值相等，但z-index:0會建立新的局部堆疊上下文
默認樣式
<div class="box1">
<ul class="list1">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="four">4</li>
</ul>
<ul class="list2">
<li id="five">5</li>
<li id="six">6</li>
</ul>
</div>
<div class="box2">
<div id="seven">7</div>
<div id="eight">8</div>
</div>
.box1{z-index: 1;}
.box2{z-index: auto;}
.list1{z-index: 2;}
.list2{z-index: 1;}
#one{z-index: -1;}
#two{z-index: 1;}
#three{z-index: 0;}
#four{z-index: auto;}
#five{z-index: 2;}
#six{z-index: 1;}
#seven{z-index: 2;}
#eight{z-index: -1;}
//堆疊順序
.box1 1
.box1 .list1 1,2
.box1 .list1 #one 1,2,-1
.box1 .list1 #two 1,2,1
.box1 .list1 #three 1,2,0
.box1 .list1 #four 1,2,auto
.box1 .list2 1,1
.box1 .list2 #five 1,1,2
.box1 .list2 #six 1,1,1
.box2 auto
.box2 #seven auto,2
.box2 #eight auto,-1
[注意]auto,2和auto,-1相當於2和-1，因爲auto代表未產生堆疊上下文。則#seven和#eight相當於和它們的父級.box2以及.box1處於同一層次
元素不會疊放在其堆疊上下文(即定位父級z-index爲數字值)的背景之下，但可以疊放在其內容之下；當元素沒有處於堆疊上下文中，元素不會疊放在<body>元素的背景之下，但可以疊放在其內容之下
兼容
【1】IE7-瀏覽器z-index的默認值是0
一般地，定位元素的z-index的默認值是auto，而IE7-瀏覽器定位元素的z-index的默認值是0，二者的區別於IE7-瀏覽器的定位元素會自動生成堆疊上下文
div{
position: absolute;
border: 1px solid black;
}
.div1{
width: 300px;
height: 100px;
background-color: pink;
z-index: 1;
}
.div2{
background-color: lightgreen;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
}
.in2{
width: 100px;
height: 150px;
background-color: lightblue;
z-index: 2;
border: none;
}
<div class="div1"></div>
<div class="div2">
<div class="in2"></div>
</div>
一般地，div1的堆疊順序爲1;div2的堆疊順序爲auto;in2的堆疊順序爲auto,2相當於2。所以覆蓋層次爲in2 覆蓋 div1 覆蓋 div2。但在IE7-瀏覽器中，div1的堆疊順序爲1;div2的堆疊順序爲0;in2的堆疊順序爲0,2。所以覆蓋層次爲div1 覆蓋 in2 覆蓋 div2
左邊爲其他瀏覽器圖示，右邊爲IE7-瀏覽器圖示
【2】IE6-瀏覽器關於z-index的一個怪異bug
當元素本身浮動且不是定位元素(position不是static)，元素父級是relative，則在IE6-瀏覽器在無論該元素的父級的z-index如何設置都不起作用
.div1{
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: pink;
}
.box{
position: relative;
z-index:2;
}
.div2{
float: left;
width: 150px;
height: 50px;
background-color: lightgreen;
}
<div class="div1"></div>
<div class="box">
<div class="div2"></div>
</div>
左邊是IE6瀏覽器結果，右邊是其他瀏覽器結果
解決方法
[1]元素去除浮動
[2]父級元素的相對定位改成絕對定位
[3]元素添加position屬性(static除外)
以上三個方法任一方法都可以，其實就是在破壞bug成立的條件
【3】IE6-瀏覽器下select的z-index無效而遮擋div
IE6-瀏覽器下select設置z-index無效，且默認會堆疊在div上
.box{
left: 30px;
z-index:2;
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
select{
width: 100px;
position: absolute;
z-index:1;
}
<div class="box"></div>
<select name="select" id="slt1">
<option value="1">第一項</option>
<option value="2">第二項</option>
</select>
左邊是IE6瀏覽器結果，右邊是其他瀏覽器結果
解決方法
在IE6-瀏覽器中，雖然div無法覆蓋select，但是iframe可以select。所以可以設置一個與div寬高相同的iframe。讓div覆蓋iframe，iframe覆蓋select，最終達到select被div覆蓋的效果
iframe{
left: 30px;
position: absolute;
width: 100px;
height: 100px;
z-index: 2;
}
<iframe src="#" frameborder="0"></iframe>
<div class="box"></div>
<select name="select" id="slt1">
<option value="1">第一項</option>
<option value="2">第二項</option>
</select>
CSS3
CSS3的出現對過去的很多規則發出了挑戰。對層疊上下文z-index的影響更加顯著，主要包括以下8個屬性
1、z-index值不爲auto的flex項(父元素display:flex | inline-flex)
2、元素的透明度opacity值不等於1
3、元素的變形transform不是none
4、元素的mix-blend-mode值不是normal
5、元素的filter值不是none
6、元素的isolation值是isolate
7、will-change指定的屬性值爲上面的任意一個
8、元素的-webkit-overflow-scrolling設置爲touch
9、元素的mask屬性不是none
設置以上9個屬性的任意一個，都和設置absolute類似，層疊上下文z-index會生效。下面以opacity透明度爲例，進行說明
