解析CSS 中元素的疊放順序

• 當不包含z-index屬性和position屬性時，所有元素的疊放順序與其所在HTML文檔中出現的先後順序一致。（使用負margin來重疊內嵌元素的特例除外。）

• 當元素浮動float時，浮動塊元素被放置於非定位塊元素與定位塊元素之間，換句話講，浮動元素顯示在普通流中的後代塊元素之上，常規流中的後代行內元素之下。

• 元素加入position位置屬性時，所有具有position屬性的元素及其子項目會顯示在其他不具有position屬性的元素上面。

• z-index只在設定了position屬性的元素上有效，沒有position屬性的元素上的z-index屬性均不生效。

z-index屬性產生堆疊上下文

擁有共同父元素的一組元素共同前移或者後移構成了一個堆疊上下文。每個堆疊上下文有一個單一的根項目，當元素上形成一個新的堆疊上下文時，堆疊上下文中的所有子項目按照堆疊順序被局限在一個固定的地區內。一個堆疊上下文構成一個整體，其內部元素有相對不同的堆疊順序，但與其他堆疊上下文比較時，只能整體上移或者下移。

通俗的講，如果某個元素被置於其所在堆疊內容相關的最底層，是沒有辦法讓他顯示在另一個擁有更高層的堆疊上下文元素之上的，哪怕將其z-index設定為無限大。

堆疊內容相關的構成規則

• 文檔的根項目

• 元素擁有position屬性（除static屬性之外），同時設定了為auto的z-index屬性。

• 元素擁有opacity屬性，且取值小於1。

• 一些新的css屬性，如filter、css-regions等需要離屏渲染的屬性，均能使元素形成堆疊上下文。

• 指定position:fixed的元素，技術z-index為auto

同一堆疊上下文內子項目的堆疊順序

從底到上(root < -index < index-aotu < +index < position)：

1. 堆疊內容相關的根項目。

2. 設定了position屬性，並且z-index為負的元素及其子素，z-index值較大的元素置於較小元素之上，同等屬性值的元素按照html中出現的先後順序堆疊。

3. 沒有設定position的元素。

4. 設定了position屬性，並且z-index屬性為auto的元素.

5. 設定了position屬性，並且z-index屬性為正值的元素。

不同堆疊內容相關的情況

• 堆疊上下文可以嵌入其他堆疊上下文。

• 每個堆疊上下文和他的統計上下文是獨立的。

• 堆疊上下文中子項目按照前述順序擺放。

• 堆疊上下文內部的子堆疊內容相關的z-index只在父堆疊上下文中有意義。

多麼深奧 鮮為人至的知識領域 慢慢在實踐中應用總結唄！

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程