有一天在做選項卡片的時候，用到了負margin，然後對選項卡進行美化的時候發現了乙個以前沒注意到的問題。就是關於層級覆蓋的問題。
在此，自己做一下總結。
1、在普通文件流裡，後面的節點會覆蓋前面的節點。當節點position:static;的時候也一樣。
2、存在浮動元素時，浮動元素會覆蓋普通文件流的節點。（這點是我簡單測試的結果，不知道準確性高不高啊。。。）
3、節點的position:relative|absolute|fixed;會覆蓋普通文件流節點。（注：測試了一下，此類節點也覆蓋浮動元素。）
4、設定了position:relative|absolute|fixed;且設定z-index:number;的節點，按照number大的覆蓋number小的。
5、position:relative|absolute|fixed;為設定z-index時，ie6/7的z-index預設為0，其他瀏覽器z-index預設為auto。
6、z-index為auto時，不參與層級比較。
7、從上遍歷到 z-index 不為 auto 的元素來參與比較。
8、position不為relative|absolute|fixed時，z-index不生效。
層技樹：position:relative|absolute|fixed;且設定z-index:number;的節點, 會被放置到乙個與 dom 不一樣的層級樹裡面, 並且在層級樹中通過對比 z-index 決定顯示的層級。
同一層級的number大的覆蓋小的，不管同一層級下的子節點number再大，也只比較最上層同級節點的number。
附帶乙個例子**：
關於z index這個層級的問題
z index它可真是乙個神奇的東西，它可以隨意安排你的層的疊加問題。如你想讓紅色矩形壓在藍色矩形上，正常布局先建立乙個紅色的再建議乙個藍色的，就可以了。但如果我相反來建立，那麼就得借助z index方法了。用z index需要先加position absolute relative定位，不然是不起...
關於設定z index層級無效的問題
最近在寫乙個小專案，遇到很多小細節的問題，果然還是要實戰才能知道自己的不足之處啊 回歸正題，我在乙個div明明設定了屬性z index，但是為什麼在網頁上顯示無效呢？首先排除設定的層級不夠的問題 然後我就去 w3school 查詢了才知道問題所在。先來看官方給的定義的用法 z index 屬性設定元...
關於css中的z index 屬性
檢索或設定物件的層疊順序。較大 number 值的物件會覆蓋在較小 number 值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值，那麼將依據它們在html文件中宣告的順序層疊。對於未指定此屬性的絕對定位物件，此屬性的 number 值為正數的物件會在其之上，而 number 值...