概念
HTML在佈局的時候，其實不完全是二維空間，還有一條Z軸，可以理解為Z軸的佈局空間。
{% asset_img z-index.jpg %}
- 層疊上下文：和BFC類似，對於巢狀的元素來講，如果某一元素具有了層疊上下文，即代表著他的子元素受這一上下文約束。
- 層疊水平：同一個層疊上下文中元素在z軸上的顯示順序，好比封建社會把人分為三六九等類似，所以所有的元素都有層疊水平。
- 層疊順序：表示元素髮生層疊時候有著特定的垂直顯示順序（可結合層疊上下文和層疊水平判斷）。
注：層疊上下文和層疊水平是概念，而層疊順序是依據層疊上下文和層疊水平進行z軸優先順序的判斷規則。
z-index相關
作用：
- 生成層疊上下文
- 改變同一層疊上下文裡的元素的層疊順序
特性
- 只適用於定位元素（即position屬性值是非static的元素）
- 如果z-index不設定則預設值為auto，此時不會建立層疊上下文，但是如果設定為0，那將會建立層疊上下文
層疊準則
下面是摘抄自css手冊中的說明：
- z-index用於確定元素在當前層疊上下文中的層疊級別，並確定該元素是否建立新的區域性層疊上下文。
- 每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定（每個元素僅屬於一個層疊上下文）。
- 同一個層疊上下文中，層疊級別大的顯示在上面，反之顯示在下面。
- 同一個層疊上下文中，層疊級別相同的兩個元素，依據它們在HTML文件流中的順序，寫在後面的將會覆蓋前面的。
- 不同層疊上下文中，元素的顯示順序依據祖先的層疊級別來決定，與自身的層疊級別無關。
- 當z-index未定義或者值為auto時，在IE6,7下會建立新的區域性層疊上下文，而在高階瀏覽器中，按照規範不產生新的區域性層疊上下文
依據以上準則，基本就可以判斷兩個元素之間的z軸方向顯示優先順序的問題
其他
除了z-index屬效能顯示控制層疊順序以外，元素型別不同那麼預設層疊順序也不一樣：
但是上面這張圖，想了半天也不知道怎麼去驗證...