CSS教程-元素层叠级别及z-index

理解并应用定位元素与堆叠上下文（stacking context）

在网页布局中，我们经常会使用到定位元素，它们的`position`属性值不仅仅是默认的`static`，还包括`relative`、`absolute`和`fixed`。对于这类元素，还有一个重要的属性——`z-index`。

什么是`z-index`呢？它在垂直于显示屏的方向（我们称之为Z轴）上，决定了定位元素的层叠顺序。每个元素都有一个默认的`z-index`值——`auto`。当定位元素的`z-index`被设置为非`auto`值时，它会生成一个新的堆叠上下文（stacking context）。这意味着元素在Z轴上的位置有了参考点。根元素总是形成一个根堆叠上下文。

理解堆叠上下文是理解网页布局中元素间层叠关系的关键。每个盒子（box）都归属于一个堆叠上下文，它是元素在Z轴方向上定位的基础。当我们设置元素的`position`属性为非静态并且`z-index`值不为`auto`时，这个元素就会产生一个新的堆叠上下文。值得注意的是，堆叠上下文和包含块（containing block）并没有必然的联系。

每个堆叠上下文内部都有一系列的堆叠层次（stack level），它决定了在同一堆叠上下文中的元素在Z轴上的显示顺序。在一个堆叠上下文内，具有更高stack level的元素会覆盖stack level较低的元素。对于同一stack level的元素，后来出现的会覆盖先出现的（即后来居上的原则）。而不同堆叠上下文中的元素，其显示顺序由父级堆叠上下文的stack level决定。这里的关键是理解stack level和`z-index`并不是同一概念。

那么，如何确定元素的stack level呢？根据W3C的规定以及实际浏览器的执行，我们可以得出以下的stack level规则：

1. 父级堆叠上下文的背景、边界。

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

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

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

5. 能够产生堆叠上下文的inline元素。对于inline元素，其stack level位于block元素之前。

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

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

经过测试，在Firefox 3.0下，这些规则执行得非常完美。而在较早版本的Firefox、IE6.0和7.0中，存在一些差异。例如，在IE中，inline元素的stack level位于block元素之前，而且浮动元素和块级元素的stack level处于同一级别。

理解并正确应用这些规则，可以帮助我们更好地控制网页元素的层叠关系，从而创建出更加复杂且富有动感的网页布局。