村莊內(nèi)
從前有一個(gè)村莊典勇，我們叫其<html>村（也就是傳說(shuō)中的根層疊上下文）蝶糯，村莊里有許多家族，有的家族比較窮秒旋，沒(méi)有住的地方约计，所以吧，家族成員們（不在層疊上下文中的普通元素）只能睡在村子里迁筛，有錢的家族吧煤蚌，則自己建別墅，建房子（創(chuàng)建新的層疊上下文）细卧，沒(méi)錢的家族都是相似的尉桩，有錢的家族各有各的有錢法，有的有錢的家族搞得的互聯(lián)網(wǎng)（擁有一個(gè)值為非static的position且z-index為非auto）贪庙，有的家族搞房地產(chǎn)（opacity小于1）蜘犁，有的家族搞金融（元素的transform值不是none），有錢的家族搞的產(chǎn)業(yè)各不一樣止邮，我們就不一一列舉了这橙，一般來(lái)說(shuō)，這個(gè)時(shí)代导披，搞互聯(lián)網(wǎng)的有錢人是最多的屈扎，村子里也不例外。
村子是個(gè)看錢的地方撩匕，各個(gè)家族吧鹰晨，你越有錢，他就能住的越前面止毕，所以把模蜡，你一進(jìn)村子里，最先看到的就是一大群別墅扁凛，在往后才是被別墅遮住的普通人們忍疾。（這就是，層疊上下文的層疊水平要比普通元素高）
家族內(nèi)
當(dāng)然谨朝，每個(gè)家族里面可能不止一個(gè)人膝昆，這個(gè)時(shí)候家族內(nèi)部就又有矛盾了丸边，誰(shuí)最大叠必，誰(shuí)最后荚孵，出去的時(shí)候排成一排，誰(shuí)排最前面纬朝，誰(shuí)排最后面收叶，一般來(lái)說(shuō)吧，按年紀(jì)大小是沒(méi)問(wèn)題共苛，最先出生的判没，經(jīng)驗(yàn)最老的，最后壓軸出場(chǎng)隅茎，年紀(jì)最小的排最前面（正常元素的層疊順序是根據(jù)文檔流的順序來(lái)排列）澄峰，然后這就出問(wèn)題了，有些人年紀(jì)小辟犀，但是輩分大呀俏竞，你不能讓我孫子站我后面呀，于是各個(gè)家族吧堂竟，就定了個(gè)家譜魂毁，把所有人按照輩分排了一下：
1.創(chuàng)建層疊上下文的元素的背景和邊界（層疊上下文的background和border）；
2.z-index為負(fù)值的子元素出嘹，數(shù)值越小越輩分越老席楚，越后面；
3.最普通的block塊狀元素税稼；
4.非定位的float浮動(dòng)元素烦秩；
5.inline或者inline-block的內(nèi)聯(lián)元素；
6.z-index:auto或者z-index:0的定位元素（定位元素的z-index的默 認(rèn)值為auto）以及其他層疊上下文元素（比如使用了小于1的opacity屬性的元素郎仆，transform值不是none的元素）只祠；
7.z-index為正值的定位元素（這個(gè)元素創(chuàng)建了一個(gè)子層疊上下文），數(shù)值越小越輩分越老丸升，越后面铆农；
當(dāng)家族大了，人太多之后就會(huì)有問(wèn)題狡耻，有的人想要分家了（子層疊上下文）墩剖，可以，自己在家族的院子里建一間房子夷狰，給自己的家人住岭皂，算是大家族里面的一個(gè)旁系，但是還是歸屬于這個(gè)家族沼头，不過(guò)在這個(gè)旁系里爷绘，對(duì)于這個(gè)旁系里的成員來(lái)說(shuō)书劝，最大的就是家主，也就是建立和這個(gè)旁系的人了土至，于是得自己再搞一個(gè)族譜购对，給自己這個(gè)旁系里面的成員定個(gè)輩分，當(dāng)然這個(gè)旁系算是分出去陶因，旁系里面的除了家主就不在入家族的族譜了骡苞，而是入自己這個(gè)旁系的族譜了。
這個(gè)輩分排行只能在自己的家里用了楷扬，你不能出去對(duì)別人說(shuō)解幽，嘿，孫子烘苹，我是你爺爺（每個(gè)層疊上下文自成體系的躲株，和兄弟元素獨(dú)立） 。
毫無(wú)疑問(wèn)镣衡，大家都住在一個(gè)村子里霜定，其實(shí)整個(gè)村子就是一個(gè)大的家族，所以村子的家族排序也是按照整個(gè)通用的族譜來(lái)的捆探。
再說(shuō)幾點(diǎn)
有幾個(gè)點(diǎn)要明確： 1.在不考慮css3的情況下然爆，z-index只對(duì)定位元素有效（relative, absolute 或者 fixed） 。 2.以上的七個(gè)堆疊順序只針對(duì)同級(jí)元素黍图，也就是屬于同一個(gè)層疊上下文的元素（說(shuō)白了就是族譜只對(duì)自己的家族有用）曾雕。 3.父元素的層疊順序會(huì)影響子元素（比如，在一個(gè)家族中有許多旁系助被，當(dāng)你這個(gè)旁系在家族中的地位提高剖张，毫無(wú)疑問(wèn)，你自己的地位也提高了揩环，一榮俱榮搔弄，一損俱損）
參考文獻(xiàn)
[深入理解CSS中的層疊上下文和層疊順序](http://www.zhangxinxu.com/wordpress/?p=511
