** z-index只對(duì)定位元素有用(relative/absolute/fixed/sticky)**
- 如果定位元素z-index沒(méi)有嵌套(z-index值為數(shù)值，不是auto)
1.后來(lái)居上
后來(lái)居上
2.哪個(gè)大，哪個(gè)上。
值大在上 - 發(fā)生嵌套
祖先優(yōu)先原則
css層疊上下文和層疊水平
W3C中這樣描述
每個(gè)元素都具有三維空間位置，除了水平和垂直位置外，還能在 "Z軸" 上層層相疊、排列。元素在 "Z軸" 方向上的呈現(xiàn)順序，由層疊上下文和層疊級(jí)別決定。
在文檔中，每個(gè)元素僅屬于一個(gè)層疊上下文。元素的層疊級(jí)別為整型，它描述了在相同層疊上下文中元素在 "Z軸" 上的呈現(xiàn)順序。
同一層疊上下文中，層疊級(jí)別大的顯示在上，層疊級(jí)別小的顯示在下，相同層疊級(jí)別時(shí)，遵循后來(lái)居上的原則，即其在HTML文檔中的順序。
不同層疊上下文中，元素呈現(xiàn)順序以父級(jí)層疊上下文的層疊級(jí)別來(lái)決定呈現(xiàn)的先后順序，與自身的層疊級(jí)別無(wú)關(guān)。
- 頁(yè)面根元素自帶層疊上下文
- z-index屬性為數(shù)值的定位元素帶層疊上下文
- 其他
層疊水平
層疊水平必須放在層疊上下文中來(lái)觀察，層疊水平和z-index不同，普通元素也有層疊水平。
層疊順序
規(guī)范元素層疊時(shí)的規(guī)則
z-index與層疊上下文
#######opacity與層疊上下文
我們知道 opacity
屬性是用來(lái)設(shè)置元素不透明度的。但可能知道 opacity
和層疊上下文有關(guān)的不多，不過(guò)沒(méi)關(guān)系，這里我們簡(jiǎn)單聊聊這個(gè)話題，有兩點(diǎn)必須注意：
當(dāng)opacity值小于1時(shí)，該元素會(huì)創(chuàng)建新的局部層疊上下文，也就是說(shuō)它可以和定位元素進(jìn)行層疊層別比較
當(dāng)opacity值小于1時(shí)，該元素?fù)碛袑盈B級(jí)別且相當(dāng)于z-index:0或auto，但不能定義 z-index ，除非本身是定位元素
簡(jiǎn)單來(lái)說(shuō)，當(dāng)一個(gè)普通的元素定義了 opacity
的值小于1時(shí)（比如 opacity:.5），那么該元素的層疊級(jí)別將會(huì)高于普通元素，其效果類(lèi)同于定位元素沒(méi)有顯式定義 z-index
的情況，唯一的區(qū)別是沒(méi)有顯式定義 z-index
的定位元素不會(huì)產(chǎn)生局部層疊上下文，而定義了 opacity
值小于1的元素會(huì)產(chǎn)生新的局部層疊上下文。
總結(jié)：判斷元素在Z軸上的順序，先判斷元素父級(jí)層疊上下文的順序，然后在具體層疊上下文中根據(jù)層疊順序來(lái)判斷順序。
附上一篇實(shí)例文章css-index實(shí)驗(yàn)
