css2的css的层叠
《css世界》的读书笔记，非原创。背景是css2。
z-index只是层叠规则中的一个属性
z-index属性只有和定位元素（position不为static的元素）在一起的时候才有用，可以是正数也可以是负数。理论上说，数值越大层级越高，但实际上会更复杂。
但是对于css3的新属性，z-index已经并非只对定位元素有效，flex盒子的子元素也可以设置z-index属性。
理解css的层叠上下文和层叠水平
层叠上下文
英文为：stacking context，是HTML中一个三维的概念。如果一个元素含层叠上下文，我们可以理解为这个元素在z轴“高人一等”。
这里有个z轴，表示的是用户与显示器之间看不见的垂直线。
我们可以把层叠上下文理解成一个小的结界，这个世界可以嵌套其他结界，也可以被其他结界嵌套。
我的理解就是父元素有z-index属性时，其子元素的层叠水平就只能在父元素里面比较了。
层叠水平
英文为：stacking level，决定了层叠上下文中元素在z轴的显示顺序。数值越高在z轴显示顺序越前。
在css中，所有元素都有层叠水平。然而对于普通元素来说，它的层叠水平被限制在当前层叠上下文元素中。因为层叠上下文本身就是一个强力的“结界”，普通元素是无法突破这个结界去跟结界外的元素去比较的。
这里需要注意的是，z-index只是可以影响元素的层叠水平而已，但也只限于定位元素和flex盒子的孩子元素。所有元素都有层叠水平。
理解元素的层叠顺序
英文为：stacking order，表示元素发生层叠时有着特定的 垂直显示顺序。注意，这里跟上面两个不一样，上面的“层叠上下文”和“层叠水平”是概念，而这里的“层叠顺序”是规则。
1)位于最下面的 background/border 特指层叠上下文元素的边框和背景色。每一个 层叠顺序规则仅适用于当前层叠上下文元素的小世界。
(2)inline水平盒子指的是包括inline/inline-block/inline-table元素的“层 叠顺序”，它们都是同等级别的。
(3)单纯从层叠水平上看，实际上 z-index:0 和 z-index:auto 是可以看成是一样的。注 意这里的措辞— “单纯从层叠水平上看”，实际上，两者在层叠上下文领域有着根本性的差异。
层叠准则
下面这两条是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面两条准则:
(1)谁大谁上:当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
(2)后来居上:当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。
层叠上下文的特性
层叠上下文元素有如下特性：
• 层叠上下文的层叠水平要比普通元素高。
• 层叠上下文可以阻断元素的混合模式(参见 http://www.zhangxinxu.com/wordpress/?p=5155 的这篇文章的第二部分说明)。
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
• 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
