大家在寫網頁的時候會不會經常遇到莫名奇妙的樣式問題，比如誰覆蓋了誰。也找不出原因，為什么z-index高的卻沒有覆蓋掉z-index低的元素呢？
帶着這些疑問。我做了個小實驗。代碼如下：
<style> .father-green { width:500px; height:300px; background-color:green; } .son-red { width:200px; height:100px; background-color:red; display:inline-block; } .subson-yellow { height:50px; width:200px; background-color: yellow; } .son-purple { width: 200px; height:100px; background-color:purple; display:inline-block; margin-left:-50px; } .mather-pink { width: 300px; height:100px; background-color:pink; } .daughter-blue { width:100px; height:50px; background-color:blue; margin-top:-20px; } </style> <body> <div class="father-green"> <div class="son-red"> <div class="subson-yellow"> 我是孫子輩的我是孫子輩的我是孫子輩的 </div> </div> <div class="son-purple"> 我是第二個子元素 </div> </div> <div class="mather-pink"><div class="daughter-blue">daughter-blue</div> </div>
其效果圖如下：
乍一看是不是很亂，看不出層級關系。在此我給大家介紹一個可以看3d布局的工具。這時候就要用到firefox瀏覽器的tilt工具了。
打開火狐瀏覽器，點擊右側漢堡按鈕，選擇附加組件。打開附加組件頁面選擇插件選項欄 搜索tilt工具，然后安裝就可以啦。
安裝好后，打開之前的頁面。點擊右側漢堡菜單，找到開發者工具，找到tilt。
然后就可以看到3d形式的網頁布局了，各模塊的層級也可以看到的。用鼠標可以拖動看不同方向的。
言歸正傳，從上面案例可以看出一個規律。
1. 普通文檔流中遵循：“后來者居上”。
* 當兩個元素都為塊元素時，默認越后面的元素層級越高，但是背景的層級比文字小。后來的塊元素 也蓋不住前面的文字。
* 當兩個元素都為行內塊和行內元素時，也是后來的元素比前面的元素層級高，但是與塊元素不同的是行內塊元素的背景層級比文字高。
* 行內元素和行內塊元素的層級比塊級元素高。
2. 浮動系列：
* 浮動和浮動比，后一個比前一個層級高
* 浮動和塊元素比，浮動層級高
* 浮動和行內塊比，行內塊層級高
* 浮動和行內比，行內層級高
3. 定位的元素：
* 都為定位元素時，也遵循后一個元素比前一個元素高。
* 絕對定位和塊元素比，絕對定位層級高
* 絕對定位和行內塊元素比，絕對定位層級高
* 絕對定位和行內元素比，絕對定位層級高
* 絕對定位和浮動，絕對定位層級高。
總結：
層疊上下文（border/background）< 負z-index < block塊狀盒子 < 浮動的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位並設定了正的z-index值，z-index值越大 層級越高）
子從父原則
對於都是擁有層疊上下文的元素來說, 內部元素的層疊屬性受限於其父元素的層疊順序。
這就回答了我剛開始提出的那個疑問，為什么有的元素z-index值高 卻沒有蓋住z-index值低的元素呢？
就是因為其還受限於父元素的層疊層級。舉個例子，代碼如下：
<style> div { text-align:center; color:#333; } .div1 { width: 500px; height: 50px; background-color:#cfc; position:relative; z-index:5; opacity:0.5; line-height:50px; } .div2 { width: 500px; height: 200px; background-color:#fdd; position:relative; z-index:4; margin-top:-10px; background-color:rgba(255,255,221,0.8); line-height:200px; text-align:left; } .div3 { width: 200px; height: 50px; background-color:#ffc; position:absolute; z-index:6; top:0; line-height:50px; } .div4 { width:200px; height:50px; background-color:#ddf; position: absolute; z-index: 3; bottom:0; line-height:50px; } .div5 { width: 200px; height:100%; background-color:#ff5; position: absolute;; z-index:1; right:0; top:0; line-height:200px; } .div6 { width: 500px; height: 50px; background-color:#cfc; position: relative; z-index:2; margin-top: -8px; } </style> </head> <body> <div class="div1">div1;position:relative;z-index5;</div> <div class="div2"> div2;position:relative;z-index:4; <div class="div3">div3;z-index:6</div> <div class="div4">div4;z-index:3</div> <div class="div5">div5;z-index:1</div> </div> <div class="div6">div6;position:relative;z-index:2;</div> </body>
效果圖：
從圖中可以看出 z-index為6的div3 卻被z-index為5的div1蓋住；z-index為1的div5卻可以蓋住z-index為2的div6；
這是因為 div3、div4和div5都受限於其父元素div2; div2的z-index比div1的低比div6高，那么其所有子元素不管z-index多少都比div1的層級低，都比div6的層級高；
可以這樣來看層級
div1===========層級5
div2===========層級4
div3 =======層級4.3
div4 =======層級4.2
div5 =======層級4.1
div6 ========層級2
后續待寫。。。