css元素z-index設置爲何不起做用？

元素位置重疊的背景常識

(x)html文檔中的元素默認處於普通流（normal flow）中，也就是說其順序由元素在文檔中的前後位置決定，此時通常不會產生重疊（但指定負邊距可能產生重疊）。

當咱們用css爲某個元素指定float浮動或者position定位後，元素的定位將會依狀況發生以下改變：

1. 指定float值left/right 行內元素也會隱形變成塊元素，元素會脫離文檔的普通流，向左或右浮動，直到其外邊緣碰到包含框或另外一個浮動框。

2. 指定position值relative 能夠相對於其在普通流中的位置偏移，本來所佔的空間仍保留。

3. 指定position值absolute 行內元素也會隱形變成塊元素，元素會脫離文檔的普通流，相對於最近的已定位祖先元素偏移，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊偏移。

4. 指定position值fixed 元素會脫離文檔的普通流，相對於瀏覽器窗口偏移，固定在瀏覽器的某個位

元素位置重疊的可能緣由

1. 負邊距/float浮動

margin爲負值時元素會依參考線向外偏移。margin-left/margin-top的參考線爲左邊的元素/上面的元素（如無兄弟元素則爲父元素的左內側/上內側）,margin-right和margin-bottom的參考線爲元素自己的border右側/border下側。通常能夠利用負邊距來就行佈局，但沒有計算好的話就可能形成元素重疊。堆疊順序由元素在文檔中的前後位置決定，後出現的會在上面。 浮動元素會脫離文檔的普通流，有可能覆蓋或遮擋掉文檔中的元素。

2. position的relative/absolute/fixed定位

當爲元素設置position值爲relative/absolute/fixed後，元素髮生的偏移可能產生重疊，且z-index屬性被激活。z-index值能夠控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。

3. window窗口元素引起的重疊

瀏覽器解析頁面時，先判斷元素的類型：窗口元素優於非窗口元素顯示（也就是窗口元素會覆蓋在其它非窗口元素之上），同爲非窗口類型才能在激活z-index屬性控制堆疊順序。 Flash元素屬於window窗口元素 因此若是頁面上flash元素和其餘元素髮生重疊，須要先將flash嵌入的wmode屬性的window（窗口，默認的會形成上面所說的問題）改成非窗口模式：opaque（非窗口不透明）或者 transparent（非窗口透明）。

position定位及z-index使用

使用前提

z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。

基本原理

z-index值能夠控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。

使用的相對性

z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（若是有）爲子元素定義了堆疊順序（css版堆疊「拼爹」）。

向上追溯找不到含有z-index值的父元素的狀況下，則能夠視爲自由的z-index元素，它能夠與父元素的同級兄弟定位元素或其餘自由的定位元素來比較z-index的值，決定其堆疊順序。

同級元素的z-index值若是相同，則堆疊順序由元素在文檔中的前後位置決定，後出現的會在上面。 因此若是當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是由於其父結點含有激活並設置了z-index值的position定位元素。