CSS Positioning: Understanding z index

通常HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而没有重叠。有一个渲染流程，所有元素都知道其他人所占用的空间。该z-index属性可以让您在呈现内容时调整对象分层的顺序。

在CSS 2.1中，每个框在三维中都有一个位置。除了它们的水平和垂直位置，方框沿“z轴”排列，并在另一个上面格式化。Z轴位置特别相关时，框重叠视觉。

（来自CSS 2.1第9.9.1节 - 分层演示）

这意味着CSS样式规则允许您在常规渲染图层（图层0）之外的图层上放置方框。每层的Z位置被表示为表示用于渲染的堆叠顺序的整数。更大的数字意味着更接近观察者。Z位置可以用CSS z-index属性来控制。

使用z-index看起来非常简单：一个单独的属性被赋予一个整数，并且有一个易于理解的行为。但是，当z-index应用于HTML元素的复杂层次结构时，其行为可能难以理解，甚至无法预测。这是由于复杂的堆栈规则。实际上CSS规范CSS-2.1附录E中已经保留了一个专门的章节来更好地解释这些规则。

本文将试图通过一些简化和几个例子来解释这些规则。

1. 无z指数叠加 : 默认堆叠规则

2. 堆放浮子 : 如何处理浮动元素

3. 增加z指数 : 使用z索引更改默认的堆叠

4. 堆叠语境 : 关于堆叠上下文的说明

5. 堆叠上下文示例1：2层HTML层次结构，最后一层的z索引

6. 堆叠上下文示例2 : 2层HTML层次结构，z-索引在所有级别上

7. 堆叠上下文示例3 : 3层HTML层次结构，z-索引在第二层