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