CSS

CSS Positioning: Understanding z index

CSS定位:理解z指数

通常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-索引在第二层