多次在項目中遇到html頁面元素的非期待重疊錯誤，多數(shù)還是position定位情況下z-index的問題。其實每次解決類似問題思路大致都是一樣的，說到底還是對z-index的理解比較模糊，可以解決問題卻不大了解其原因，導致重復出錯……于是決定把重疊問題弄清下，把z-index理順下。

經(jīng)過一番查找對比實踐理解，下面就從元素重疊的背景常識及可能原因說起，淺談下position定位元素的z-index順序?？偨Y下我目前的理解，希望也能對遇到過類似問題有同樣疑惑的你有一點幫助或啟發(fā)。

元素位置重疊的背景常識

(x)html文檔中的元素默認處于普通流（normal flow）中，也就是說其順序由元素在文檔中的先后位置決定，此時一般不會產(chǎn)生重疊（但指定負邊距可能產(chǎn)生重疊）。當我們用css為某個元素指定float浮動或者position定位后，元素的定位將會依情況發(fā)生如下改變：

1. 指定float值left/right

行內(nèi)元素也會隱形變成塊元素，元素會脫離文檔的普通流，向左或右浮動，直到其外邊緣碰到包含框或另一個浮動框。

2. 指定position值relative

可以相對于其在普通流中的位置偏移，原本所占的空間仍保留。

3. 指定position值absolute

行內(nèi)元素也會隱形變成塊元素，元素會脫離文檔的普通流，相對于最近的已定位祖先元素偏移，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊偏移。

4. 指定position值fixed

元素會脫離文檔的普通流，相對于瀏覽器窗口偏移，固定在瀏覽器的某個位置。

以上四種情況下，文檔中的元素都將可能被浮動/定位元素覆蓋產(chǎn)生重疊。

元素位置重疊的可能原因

1. 負邊距/float浮動

margin為負值時元素會依參考線向外偏移。margin-left/margin-top的參考線為左邊的元素/上面的元素（如無兄弟元素則為父元素的左內(nèi)側/上內(nèi)側）,margin-right和margin-bottom的參考線為元素本身的border右側/border下側。一般可以利用負邊距來就行布局，但沒有計算好的話就可能造成元素重疊。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會在上面。

浮動元素會脫離文檔的普通流，有可能覆蓋或遮擋掉文檔中的元素。

2. position的relative/absolute/fixed定位

當為元素設置position值為relative/absolute/fixed后，元素發(fā)生的偏移可能產(chǎn)生重疊，且z-index屬性被激活。z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時會在值小的元素上面。

3. window窗口元素引發(fā)的重疊

瀏覽器解析頁面時，先判斷元素的類型：窗口元素優(yōu)于非窗口元素顯示（也就是窗口元素會覆蓋在其它非窗口元素之上），同為非窗口類型才能在激活z-index屬性控制堆疊順序。