z-index的作用
很多時候需要把一個元素覆蓋到另一個元素之上，比如登入彈出框等，這個時候就需要z-index屬性出場了。所以呢，z-index就是調節層的顯示優先級，決定哪個顯示在最上方。作用范圍就是Positioned element，比如絕對定位，相對定位，固定定位。
層疊上下文（The stacking context）中的z-index
先看下面的關系圖：
這是效果：
我們會發現雖然DIV4的index最大，但是它還是被別的元素覆蓋了，這是為什么呢？
簡單的理解就是z-index在不同的地方有不同的權重，在最高級（root）權重最高，相鄰元素（sibling）嵌套一層權重就低一級。對於上面的例子我們可以這么計算：
- DIV1--->5
- DIV2--->2
- DIV3--->4
- DIV4--->4.6
- DIV5--->4.1
- DIV6--->4.3
這樣計算一般的z-index嵌套就OK啦。
不用z-index的堆疊（stacking）
兩條原則：
- 沒有指定z-index值的positioned element，他們的堆疊順序取決於在HTML文檔中的順序，越靠后出現的元素，位置越高；
- 非positoned element元素，不管在HTML中出現的順序如何，總是在positioned element元素下方；
例子：
層疊與浮動之間的關系
non-positioned block的背景和邊界沒有被浮動元素影響，但是元素中的內容被浮動元素影響了（浮動布局的之后注意這個特性）。
層疊順序：
- 根元素的背景和邊界；
- 在普通流中的子代元素；
- 浮動元素；
- 普通流中的內聯子代元素；
- 定位了的元素；
例子：
z-index數值分配
隨便打開一個網站的首頁，查看源碼之后發現，z-index的數值亂七八糟，那應該怎么用合適呢？
我采取的辦法是，把100設置為1檔，如果需要堆疊三個層，從上到下分別是DIV3，DIV2，DIV1。那么DIV1的z-index賦值為100，DIV2的z-index賦值為200，DIV3的z-index賦值為300，這樣如果將來在DIV1和DIV2之間加入一層的話還有很多余量可以選擇。如果三個之間不留空隙的話以后插入一個新層就不方便啦。這樣還有一個好處，就是通過查看z-index的數值可以很方便的判斷當前元素位於哪一層。
既定位了然后也浮動
浮動和相對定位可以一起使用；
浮動和絕對定位不能一起使用（浮動不起任何作用）。