css2的css的層疊
《css世界》的讀書筆記，非原創(chuàng)念搬。背景是css2抑堡。
z-index只是層疊規(guī)則中的一個(gè)屬性
z-index屬性只有和定位元素（position不為static的元素）在一起的時(shí)候才有用摆出，可以是正數(shù)也可以是負(fù)數(shù)朗徊。理論上說，數(shù)值越大層級(jí)越高偎漫，但實(shí)際上會(huì)更復(fù)雜爷恳。
但是對(duì)于css3的新屬性，z-index已經(jīng)并非只對(duì)定位元素有效象踊，flex盒子的子元素也可以設(shè)置z-index屬性温亲。
理解css的層疊上下文和層疊水平
層疊上下文
英文為：stacking context，是HTML中一個(gè)三維的概念杯矩。如果一個(gè)元素含層疊上下文栈虚，我們可以理解為這個(gè)元素在z軸“高人一等”。
這里有個(gè)z軸史隆，表示的是用戶與顯示器之間看不見的垂直線魂务。
我們可以把層疊上下文理解成一個(gè)小的結(jié)界，這個(gè)世界可以嵌套其他結(jié)界泌射，也可以被其他結(jié)界嵌套粘姜。
我的理解就是父元素有z-index屬性時(shí)，其子元素的層疊水平就只能在父元素里面比較了熔酷。
層疊水平
英文為：stacking level孤紧，決定了層疊上下文中元素在z軸的顯示順序。數(shù)值越高在z軸顯示順序越前拒秘。
在css中号显，所有元素都有層疊水平。然而對(duì)于普通元素來說躺酒，它的層疊水平被限制在當(dāng)前層疊上下文元素中押蚤。因?yàn)閷盈B上下文本身就是一個(gè)強(qiáng)力的“結(jié)界”，普通元素是無法突破這個(gè)結(jié)界去跟結(jié)界外的元素去比較的阴颖。
這里需要注意的是活喊，z-index只是可以影響元素的層疊水平而已，但也只限于定位元素和flex盒子的孩子元素。所有元素都有層疊水平钾菊。
理解元素的層疊順序
英文為：stacking order帅矗，表示元素發(fā)生層疊時(shí)有著特定的 垂直顯示順序。注意煞烫，這里跟上面兩個(gè)不一樣浑此，上面的“層疊上下文”和“層疊水平”是概念，而這里的“層疊順序”是規(guī)則滞详。
1)位于最下面的 background/border 特指層疊上下文元素的邊框和背景色凛俱。每一個(gè) 層疊順序規(guī)則僅適用于當(dāng)前層疊上下文元素的小世界。
(2)inline水平盒子指的是包括inline/inline-block/inline-table元素的“層 疊順序”，它們都是同等級(jí)別的。
(3)單純從層疊水平上看耐量，實(shí)際上 z-index:0 和 z-index:auto 是可以看成是一樣的咕幻。注 意這里的措辭— “單純從層疊水平上看”，實(shí)際上，兩者在層疊上下文領(lǐng)域有著根本性的差異。
層疊準(zhǔn)則
下面這兩條是層疊領(lǐng)域的黃金準(zhǔn)則。當(dāng)元素發(fā)生層疊的時(shí)候奋隶，其覆蓋關(guān)系遵循下面兩條準(zhǔn)則:
(1)誰大誰上:當(dāng)具有明顯的層疊水平標(biāo)識(shí)的時(shí)候，如生效的 z-index 屬性值悦荒，在同一個(gè)層疊上下文領(lǐng)域唯欣，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)。
(2)后來居上:當(dāng)元素的層疊水平一致搬味、層疊順序相同的時(shí)候境氢，在 DOM 流中處于后面的元素會(huì)覆蓋前面的元素。
層疊上下文的特性
層疊上下文元素有如下特性：
? 層疊上下文的層疊水平要比普通元素高身腻。
? 層疊上下文可以阻斷元素的混合模式(參見 http://www.zhangxinxu.com/wordpress/?p=5155 的這篇文章的第二部分說明)产还。
? 層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的“層疊上下文”嘀趟。
? 每個(gè)層疊上下文和兄弟元素獨(dú)立脐区，也就是說，當(dāng)進(jìn)行層疊變化或渲染的時(shí)候她按，只需要考慮后代元素牛隅。
? 每個(gè)層疊上下文是自成體系的，當(dāng)元素發(fā)生層疊的時(shí)候酌泰，整個(gè)元素被認(rèn)為是在父層疊上下文的層疊順序中媒佣。
