- 當不包含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)：
- 堆疊上下文的根元素。
- 設置了position屬性，并且z-index為負的元素及其子素，z-index值較大的元素置于較小元素之上，同等屬性值的元素按照html中出現的先后順序堆疊。
- 沒有設置position的元素。
- 設置了position屬性，并且z-index屬性為auto的元素.
- 設置了position屬性，并且z-index屬性為正值的元素。
不同堆疊上下文的情況
- 堆疊上下文可以嵌入其他堆疊上下文。
- 每個堆疊上下文和他的統計上下文是獨立的。
- 堆疊上下文中子元素按照前述順序擺放。
- 堆疊上下文內部的子堆疊上下文的z-index只在父堆疊上下文中有意義。
多么深奧 鮮為人至的知識領域 慢慢在實踐中應用總結唄！
轉載 :http://blog.csdn.net/u014346301/article/details/53484968
