CSS教程-网页布局定位及z-index解释

理解并应用z-index与stacking context：定位元素的层次排列

在web开发中，当我们需要调整元素的位置时，除了默认的static定位外，我们常使用position属性来设定元素的相对、绝对或固定位置。对于这些定位元素，z-index属性则为我们提供了在垂直于显示屏方向（即Z轴）上的层叠顺序。

想象一下每一个元素都是一个堆叠的盒子（box），它们都存在于一个所谓的stacking context中。根元素形成了一个root stacking context，而其他stacking context的产生则源于定位元素的z-index属性被设置为非auto的值。例如，当我们将一个元素的position属性设为relative，并为其指定z-index值为0时，这个元素就会产生一个新的stacking context。值得注意的是，stacking context与containing block并没有必然的联系。

每个stacking context中的元素都有一个stack level，它决定了在同一stacking context中元素在Z轴上的显示顺序。在一个stacking context内，拥有更高stack level的元素会覆盖在低stack level元素之上。对于相同的stack level，后来出现的元素会覆盖先前的元素（即后来居上的原则）。

那么，在一个父级stacking context中，各种元素的stack level是如何排列的呢？根据W3C关于stack level的介绍，我们可以得出以下规则：

1. 父级stacking context的背景和边界首先显示。

2. z-index值为负的定位元素，值越小越在下。

3. 文本流中的非定位block级子元素。

4. 文本流中的非定位float浮动子元素。

5. 能够产生stacking context的inline元素，其stack level通常在block元素之前。

6. z-index值为auto或0的定位元素。

7. z-index值为正的定位元素，值越大越在上。

经过测试，这些规则在Firefox 3.0下完全吻合。而在Firefox 2.0中，只有“z-index值为负值的定位元素”与“父级stacking context的背景、边界”的显示顺序有所不同。至于IE 6.0和7.0，inline元素的stack level位于block元素之前，并且浮动元素和block元素的stack level处于同一级别。

理解这些规则对于开发者来说至关重要，因为它们可以帮助我们精确地控制元素的层叠顺序，从而实现复杂的布局和设计。随着浏览器技术的不断进步，这些规则的执行也会越来越一致。