1. non-positioned element：無CSS定位的元素，也就是position: static的元素。
2. positioned element：CSS定位的元素，也就是position: relative/absolute/fixed的元素。
3. box：文檔樹由element組成，渲染樹由box組成，實際進行元素大小、布局渲染操作的對象是box進行而不是element。box由element對應生成（也有是anonymous box不是由element對應生成，而是渲染器根據規則自動生成），non-positioned element對應的是non-position box，positioned element對應的是position box。
4. z-axis：box定位坐標系中的z軸。
5. stacking context：層疊上下文，z-axis的基本組成單位。box與stacking context的映射關系為N:1。每個stacking context有一個父context（除了root stacking context外）和0~N個子context。
6. root stacking context：與根box（html/body對應的box）對應的層疊上下文，是其他stacking context的祖先context，root stacking context的範圍覆蓋整條z-axis。
7. stack level：層疊等級，當N個box位於同一個stacking context中，則通過stack level來決定它們位於z-axis上的位置。註意：stack level為相對值而非如px那樣為絕對值。

層疊規則

1. 1. 前提：boxes屬於同一個stacking context，並且z-index相同 。 規則：按照box對應的element在文檔樹的順序，後者比前者更靠近用戶（back-to-front）
2. 2. 前提：boxes屬於同一個stacking context，並且z-index不同。 規則：z-index屬性值大的box更靠近用戶
3. 3. 前提：boxes屬於不同的stacking context，並且stacking contexts沒有祖孫/父子關系 。 規則：boxes會向上沿著父box進行搜索，直到父boxes屬於同一個stacking context為止，然後比較父boxes的z-index屬性值，z-index屬性值大的box更靠近用戶。
4. 4. 前提：boxes屬於不同的stacking context，並且stacking contexts為祖孫/父子關系。 規則：屬於子stacking context的box必定更靠近用戶
5. 5. 前提：boxes屬於相同的stacking context，並且兩者都是non-positioned element。 規則：float:left|right的元素必定更靠近用戶

同一個stacking context的z-index才具有可比性，也就是說在討論z-index時必須帶說明是哪個stacking context下的z-index。
z-index屬性值僅對positioned box生效，而non-positioned box的z-index永遠為0。

z-index的兩個作用：

1. 設置box在其所屬的stacking context下的stack level；
2. 當z-index屬性值非0時，則在該box中創建一個新的stacking context，而該box的子孫box默認屬於這個新stacking context

註意：z-index的默認值為auto，自動賦值為0。因此默認情況下不會創建新的stacking context。

理解z-index