作者:WangMin
格言:努力做好自己喜歡的每一件事

對於所有定位，最後都不免遇到兩個元素試圖放在同一位置上的情況。顯然，其中一個必須遮住另一個。但是如何控制哪個元素放在上層，這就出現了z-index這個屬性。

z-index屬性的含義

一個元素在文件中的層疊順序，用於確認元素在當前層疊上下文中的層疊級別。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

• z-index的屬性值越高越靠前。
• 元素可擁有負的 z-index 屬性值。
• z-index 跟具體數字。
• z-index的數值不跟單位。
  
  如上圖所示，這個屬性的名字由座標系統得來，其中從左向右是x軸，從上到下是y軸。從螢幕到使用者是z軸。在這個座標系中，較高z-index值的元素比較低z-index值的元素離使用者更近，也就是說較高z-index值的元素最先呈現在使用者的視野，這會導致較高z-index值的元素覆蓋其他元素
  ，這也稱為堆疊或疊放。

z-index 屬性使用條件

z-index 在設定了position屬性（position不為static的元素）的元素條件下使用。通常我們讓不同的物件盒子以不同順序重疊排列，我們就要使用 z-index 樣式屬性。
接下來從最簡單的不使用z-index的情況開始學習z-index 屬性。

z-index應用案例

1）對於同級元素
層疊級別大的顯示在上面，級別小的顯示在下面，也就是z-index屬性值越大的元素在z-index屬性值小的元素上面；層疊級別中的兩個元素，依據它們在HTML文件流中的順序，寫在後面的將會覆蓋前面的。程式碼如下：

<div class="box">box
	<div class="same one">one</div>
	<div class="same two">two</div>
</div>
 

.box{
	width:350px;
	height:350px;
	color: #fff;
	background:brown;
	position: relative;
}
.box>.same{
	width:250px;
	height:250px;
	position: absolute;
}
.box>.one{
	background:burlywood;
	top:30px;
	left:30px;
}
.box>.two{
	background:palegoldenrod;
	top:60px;
	left: 60px;
}

情況一：

在還沒有給設定了 position: absolute;

情況二：

如果我們想要元素 .two 覆蓋在元素 .one 下面，就要給 .one 設定z-index屬性，情況如下：

在這裡可能就有小夥伴發現我並沒有給元素 .two 設定z-index屬性，元素 .two 為什麼會覆蓋在元素 .one 下面。以下我來說明以下原因：

1. IE6/7下position不為static，且z-index不存在時z-index為0，除此之外的瀏覽器z-index為auto。
2. z-index為auto的元素不參與層級關係的比較，由向上遍歷至此且z-index不為auto的元素來參與比較。

以上我們可以得出結論：在這裡元素 .two 的z-index的屬性值為auto不與元素 .one 的z-index的屬性值進行比較，而元素 .one 的z-index的屬性值在HTML文件流中最高，所以元素 .two 覆蓋在元素 .one 下面。

情況三：

如果我們給元素 .two 也加上 z-index:1; ？結果得到元素 .two 覆蓋在元素 .one 上面。那是因為：一旦z-index值相等，情況就和都不設定z-index值一樣了。

情況四：

1. 在父元素 .box 新增 z-index:10，在元素 .two和元素 .one 新增 z-index:2;， 這樣理論上父元素就會在上面（父元素 .box覆蓋元素 .two和元素 .one），但是實際情況跟情況一的效果是一樣的，結果沒有變! 如下：
   
2. 把兩個子元素的z-index值同時設定為-2；父元素不設定z-index屬性。結果如下：

從上圖我們只看到父元素 .box，並不是元素 .two和元素 .one不見了，而是被父元素 .box遮住了。 這說明在父元素和子元素之間還是可以作比較的！！！只是需要我們把子元素的z-index值設為負數。

2） 對於不同級元素

元素的顯示順序依據父級元素的層疊級別（z-index值）來決定，與自身的層疊級別（z-index值）無關。
有兩個div盒子，元素 .two和元素 .one在元素.box1 裡，元素.three 在元素 .box2 裡

<div class="box box2">box
	<div class="same one">one</div>
	<div class="same two">two</div>
</div>
<div class="box box2">box
	<div class="same three">three</div>
</div>

元素.box1和元素 .box2設定z-index，那麼（元素.box1和元素 .box2）的子元素 (元素 .two、元素 .one、元素.three ）以父元素的層疊關係為主。

.box{
	width:350px;
	height:350px;
	color: #fff;
	position: relative;
}
.box1{
	z-index: 1;
}
.box2{
	z-index: 2;
}
.box>.same{
	width:250px;
	height:250px;
	position: absolute;
}
.box>.one{
	background:burlywood;
}
.box>.two{
	background:palegoldenrod;
	top:40px;
	left: 40px;
	z-index: 20;
}
.box>.three{
	background:palegreen;
	top: -100px;
	left: 80px;
}

元素 .two、元素 .one、元素.three處於不同的div中，不管子元素中是否設定了z-index屬性，子元素的層級關係都根據父級的z-index大小來確定，也就是說子元素的層級關係與它們自身的z-index屬性值無關。例子中，元素.box1的z-index值（z-index: 1;）小於元素 .box2的z-index值（z-index: 2;），所以元素.three在元素 .two的上面，如下圖所示：

z-index的一些理解誤區

一般我們會說：z-index屬性只有和定位元素（position不為static的元素）一起使用的時候，才起作用，那首先這種說法是錯誤的，因為在css3中flex盒子的子元素也可以設定z-index屬性。

以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這裡!!