解析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影片教學

#

以上是解析CSS 中元素的疊放順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！