- 如果不考慮css3，只有定位元素的z-index才有作用。
- 如果定位元素z-index沒有發生嵌套：1、后來居上的準則（dom流先后順序）；2、哪個大，哪個上。
- 如果定位元素發生了嵌套，則為祖先優先原則。前提:z-index是數值，非auto
css2.1：（z-index:auto）當前層疊上下文的生成盒子層疊上下文是0.盒子（除非是根元素）不會創建新的層疊上下文。
Paste_Image.png
層疊上下文、層疊水平和層疊順序的概念
- 層疊上下文（stacking context）：是HTML元素中的一個三維概念，表示元素在z軸上有了“可以高人一等”。
1、頁面根元素天生具有層疊上下文，稱之為“根元素層疊上下文”
2、z-index值為數值的定位元素也具有層疊上下文。
3、其他屬性。。。。
Paste_Image.png
層疊上下文的特性：
1、可以嵌套，組合成一個分層次的層疊上下文。
2、每個層疊上下文和兄弟元素獨立：當進行層疊變化或渲染的時候，只需要考慮后代元素。
3、每個層疊上下文是自成體系的：當元素的內容被層疊后，整個元素被認為是在父層的層疊順序中。層疊水平（stacking level）：層疊上下文中的每一個元素都有一個層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序。遵循“后來居上”和“誰大誰上”的層疊準則。
層疊水平和z-index不是一個東西，普通元素也有層疊水平。層疊順序（stacking order）：元素發生層疊時候有著特定的垂直顯示順序。意義是規范元素重疊時候的呈現規則
Paste_Image.png
三個要點：
1、定位元素默認z-index:auto可以看成是z-index:0;
2、z-index不為auto的定位元素會創建層疊上下文；
3、z-index層疊順序的比較止步于父級層疊上下文。非定位元素的層疊上下文
1、不支持z-index的層疊上下文元素的層疊順序均是z-index:auto級別
2、依賴z-index的層疊上下文元素的層疊順序取決于z-index值經驗：
1、對于非浮層元素，避免設置z-index值，z-index值沒有任何道理需要超過2---不犯二準則。
2、采用組件層級計算器方式設置層級：通過js獲得body下子元素的最大z-index值+1
