有一天在做選項卡片的時候，用到了負margin，然后對選項卡進行美化的時候發現了一個以前沒注意到的問題。就是關於層級覆蓋的問題。
然后在網上尋找了一番相關資料，找到了一個比較詳細的講解。鏈接：http://www.neoease.com/css-z-index-property-and-layering-tree/
在此，自己做一下總結。
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。