村莊內(nèi)
從前有一個村莊，我們叫其<html>村（也就是傳說中的根層疊上下文），村莊里有許多家族，有的家族比較窮，沒有住的地方，所以吧，家族成員們（不在層疊上下文中的普通元素）只能睡在村子里，有錢的家族吧，則自己建別墅，建房子（創(chuàng)建新的層疊上下文），沒錢的家族都是相似的，有錢的家族各有各的有錢法，有的有錢的家族搞得的互聯(lián)網(wǎng)（擁有一個值為非static的position且z-index為非auto），有的家族搞房地產(chǎn)（opacity小于1），有的家族搞金融（元素的transform值不是none），有錢的家族搞的產(chǎn)業(yè)各不一樣，我們就不一一列舉了，一般來說，這個時代，搞互聯(lián)網(wǎng)的有錢人是最多的，村子里也不例外。
村子是個看錢的地方，各個家族吧，你越有錢，他就能住的越前面，所以把，你一進村子里，最先看到的就是一大群別墅，在往后才是被別墅遮住的普通人們。（這就是，層疊上下文的層疊水平要比普通元素高）
家族內(nèi)
當然，每個家族里面可能不止一個人，這個時候家族內(nèi)部就又有矛盾了，誰最大，誰最后，出去的時候排成一排，誰排最前面，誰排最后面，一般來說吧，按年紀大小是沒問題，最先出生的，經(jīng)驗最老的，最后壓軸出場，年紀最小的排最前面（正常元素的層疊順序是根據(jù)文檔流的順序來排列），然后這就出問題了，有些人年紀小，但是輩分大呀，你不能讓我孫子站我后面呀，于是各個家族吧，就定了個家譜，把所有人按照輩分排了一下：
1.創(chuàng)建層疊上下文的元素的背景和邊界（層疊上下文的background和border）；
2.z-index為負值的子元素，數(shù)值越小越輩分越老，越后面；
3.最普通的block塊狀元素；
4.非定位的float浮動元素；
5.inline或者inline-block的內(nèi)聯(lián)元素；
6.z-index:auto或者z-index:0的定位元素（定位元素的z-index的默 認值為auto）以及其他層疊上下文元素（比如使用了小于1的opacity屬性的元素，transform值不是none的元素）；
7.z-index為正值的定位元素（這個元素創(chuàng)建了一個子層疊上下文），數(shù)值越小越輩分越老，越后面；
當家族大了，人太多之后就會有問題，有的人想要分家了（子層疊上下文），可以，自己在家族的院子里建一間房子，給自己的家人住，算是大家族里面的一個旁系，但是還是歸屬于這個家族，不過在這個旁系里，對于這個旁系里的成員來說，最大的就是家主，也就是建立和這個旁系的人了，于是得自己再搞一個族譜，給自己這個旁系里面的成員定個輩分，當然這個旁系算是分出去，旁系里面的除了家主就不在入家族的族譜了，而是入自己這個旁系的族譜了。
這個輩分排行只能在自己的家里用了，你不能出去對別人說，嘿，孫子，我是你爺爺（每個層疊上下文自成體系的，和兄弟元素獨立） 。
毫無疑問，大家都住在一個村子里，其實整個村子就是一個大的家族，所以村子的家族排序也是按照整個通用的族譜來的。
再說幾點
有幾個點要明確： 1.在不考慮css3的情況下，z-index只對定位元素有效（relative, absolute 或者 fixed） 。 2.以上的七個堆疊順序只針對同級元素，也就是屬于同一個層疊上下文的元素（說白了就是族譜只對自己的家族有用）。 3.父元素的層疊順序會影響子元素（比如，在一個家族中有許多旁系，當你這個旁系在家族中的地位提高，毫無疑問，你自己的地位也提高了，一榮俱榮，一損俱損）
參考文獻
[深入理解CSS中的層疊上下文和層疊順序](http://www.zhangxinxu.com/wordpress/?p=511
