全透视：CSS Z-index 属性

自然的层叠顺序

在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。

• 元素的背景和边框会创建一个stacking context
• 具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
• 没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
• 没有被定位，浮动的元素，按照出现的先后顺序排列
• 内联元素，按照出现的先后顺序排列排列
• 被定位的元素，按照出现的先后顺序排列

Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。

当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺序。

上面的BOX被定义了不同的背景和边框色，并且后两个是交错的并且定义了负值的顶部边距，所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位于第一位，蓝色的BOX位于第二位，金色的排在第三。应用的负边距明确的表明这个事实：这些元素未被设置Z-index 属性；它们的层叠顺序是自然的，或者是默认的，复合规则的。产生交错的现象都是因为负值的边距。

1. 全透视：CSS Z-index 属性 [1]
2. 全透视：CSS Z-index 属性 [2]
3. 全透视：CSS Z-index 属性 [3]
4. 全透视：CSS Z-index 属性 [4]
5. 全透视：CSS Z-index 属性 [5]
6. 全透视：CSS Z-index 属性 [6]