【层叠村的故事】关于元素的堆叠【层叠村的故事】关于元素的

村庄内从前有一个村庄，我们叫其村（也就是传说中的根层叠上下文），村庄里有许多家族，有的家族比较穷，没有住的地方，所以吧，家族成员们（不在层叠上下文中的普通元素）只能睡在村子里，有钱的家族吧，则自己建别墅，建房子（创建新的层叠上下文），没钱的家族都是相似的，有钱的家族各有各的有钱法，有的有钱的家族搞得的互联网（拥有一个值为非static的position且z-index为非auto），有的家族搞房地产（opacity小于1），有的家族搞金融（元素的transform值不是none），有钱的家族搞的产业各不一样，我们就不一一列举了，一般来说，这个时代，搞互联网的有钱人是最多的，村子里也不例外。
村子是个看钱的地方，各个家族吧，你越有钱，他就能住的越前面，所以把，你一进村子里，最先看到的就是一大群别墅，在往后才是被别墅遮住的普通人们。（这就是，层叠上下文的层叠水平要比普通元素高）
家族内当然，每个家族里面可能不止一个人，这个时候家族内部就又有矛盾了，谁最大，谁最后，出去的时候排成一排，谁排最前面，谁排最后面，一般来说吧，按年纪大小是没问题，最先出生的，经验最老的，最后压轴出场，年纪最小的排最前面（正常元素的层叠顺序是根据文档流的顺序来排列），然后这就出问题了，有些人年纪小，但是辈分大呀，你不能让我孙子站我后面呀，于是各个家族吧，就定了个家谱，把所有人按照辈分排了一下：

1.创建层叠上下文的元素的背景和边界（层叠上下文的background和border）；
2.z-index为负值的子元素，数值越小越辈分越老，越后面；
3.最普通的block块状元素；
4.非定位的float浮动元素；
5.inline或者inline-block的内联元素；
6.z-index:auto或者z-index:0的定位元素（定位元素的z-index的默认值为auto）以及其他层叠上下文元素（比如使用了小于1的opacity属性的元素，transform值不是none的元素）；
7.z-index为正值的定位元素（这个元素创建了一个子层叠上下文），数值越小越辈分越老，越后面；

当家族大了，人太多之后就会有问题，有的人想要分家了（子层叠上下文），可以，自己在家族的院子里建一间房子，给自己的家人住，算是大家族里面的一个旁系，但是还是归属于这个家族，不过在这个旁系里，对于这个旁系里的成员来说，最大的就是家主，也就是建立和这个旁系的人了，于是得自己再搞一个族谱，给自己这个旁系里面的成员定个辈分，当然这个旁系算是分出去，旁系里面的除了家主就不在入家族的族谱了，而是入自己这个旁系的族谱了。
这个辈分排行只能在自己的家里用了，你不能出去对别人说，嘿，孙子，我是你爷爷（每个层叠上下文自成体系的，和兄弟元素独立）。
毫无疑问，大家都住在一个村子里，其实整个村子就是一个大的家族，所以村子的家族排序也是按照整个通用的族谱来的。
再说几点有几个点要明确： 1.在不考虑css3的情况下，z-index只对定位元素有效（relative, absolute 或者 fixed）。 2.以上的七个堆叠顺序只针对同级元素，也就是属于同一个层叠上下文的元素（说白了就是族谱只对自己的家族有用）。 3.父元素的层叠顺序会影响子元素（比如，在一个家族中有许多旁系，当你这个旁系在家族中的地位提高，毫无疑问，你自己的地位也提高了，一荣俱荣，一损俱损）
参考文献 【【层叠村的故事】关于元素的堆叠】[深入理解CSS中的层叠上下文和层叠顺序](http://www.zhangxinxu.com/wordpress/?p=511