- 當(dāng)不包含z-index屬性和position屬性時(shí)东帅，所有元素的疊放順序與其所在HTML文檔中出現(xiàn)的先后順序一致粗卜。（使用負(fù)margin來(lái)重疊內(nèi)聯(lián)元素的特例除外。）
- 當(dāng)元素浮動(dòng)float時(shí)患朱，浮動(dòng)塊元素被放置于非定位塊元素與定位塊元素之間，換句話講曼月，浮動(dòng)元素顯示在普通流中的后代塊元素之上，常規(guī)流中的后代行內(nèi)元素之下柔昼。
- 元素加入position位置屬性時(shí)哑芹，所有具有position屬性的元素及其子元素會(huì)顯示在其他不具有position屬性的元素上面。
- z-index只在設(shè)置了position屬性的元素上有效捕透，沒(méi)有position屬性的元素上的z-index屬性均不生效聪姿。
z-index屬性產(chǎn)生堆疊上下文
擁有共同父元素的一組元素共同前移或者后移構(gòu)成了一個(gè)堆疊上下文。每個(gè)堆疊上下文有一個(gè)單一的根元素乙嘀，當(dāng)元素上形成一個(gè)新的堆疊上下文時(shí)末购，堆疊上下文中的所有子元素按照堆疊順序被局限在一個(gè)固定的區(qū)域內(nèi)。一個(gè)堆疊上下文構(gòu)成一個(gè)整體虎谢，其內(nèi)部元素有相對(duì)不同的堆疊順序盟榴，但與其他堆疊上下文比較時(shí)，只能整體上移或者下移婴噩。
通俗的講擎场，如果某個(gè)元素被置于其所在堆疊上下文的最底層，是沒(méi)有辦法讓他顯示在另一個(gè)擁有更高層的堆疊上下文元素之上的几莽，哪怕將其z-index設(shè)置為無(wú)限大迅办。
堆疊上下文的構(gòu)成規(guī)則
- 文檔的根元素
- 元素?fù)碛衟osition屬性（除static屬性之外），同時(shí)設(shè)置了為auto的z-index屬性章蚣。
- 元素?fù)碛衞pacity屬性礼饱，且取值小于1。
- 一些新的css屬性，如filter镊绪、css-regions等需要離屏渲染的屬性，均能使元素形成堆疊上下文洒忧。
- 指定position:fixed的元素蝴韭，技術(shù)z-index為auto
同一堆疊上下文內(nèi)子元素的堆疊順序
從底到上(root < -index < index-aotu < +index < position)：
- 堆疊上下文的根元素。
- 設(shè)置了position屬性熙侍，并且z-index為負(fù)的元素及其子素榄鉴，z-index值較大的元素置于較小元素之上，同等屬性值的元素按照html中出現(xiàn)的先后順序堆疊蛉抓。
- 沒(méi)有設(shè)置position的元素庆尘。
- 設(shè)置了position屬性，并且z-index屬性為auto的元素.
- 設(shè)置了position屬性巷送，并且z-index屬性為正值的元素驶忌。
不同堆疊上下文的情況
- 堆疊上下文可以嵌入其他堆疊上下文。
- 每個(gè)堆疊上下文和他的統(tǒng)計(jì)上下文是獨(dú)立的笑跛。
- 堆疊上下文中子元素按照前述順序擺放付魔。
- 堆疊上下文內(nèi)部的子堆疊上下文的z-index只在父堆疊上下文中有意義。
多么深?yuàn)W 鮮為人至的知識(shí)領(lǐng)域 慢慢在實(shí)踐中應(yīng)用總結(jié)唄飞蹂！
轉(zhuǎn)載 :http://blog.csdn.net/u014346301/article/details/53484968
