理解CSS的 z-index属性

人们通常认为HTML页面是二维的, 因为文本、图片等元素可以依次排列而不相互覆盖。

所有的元素都可以从渲染引擎得知别人占用了多大的空间

在 CSS 2.1中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, 当他们相互覆盖时, z轴顺序就变得十分重要。

(参见 CSS 2.1 Section 9.9.1 - Layered presentation)

 这意味着其实CSS允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数(z轴顺序)来表明当前层在z轴的位置。 数字越大, 元素越接近观察者。Z轴顺序用CSS的z-index属性来指定。

使用z-index很简单: 给它指定一个整数值即可。  然而, 在层叠比较复杂的HTML元素上使用z-index时,结果可能让人觉得困惑, 甚至不可思议。  这是由复杂的元素排布规则导致的。  更多细节请参见  CSS-2.1 Appendix E 。

 

本文将通过一些简单的例子来解释这些规则。

  1. Stacking without z-index : 默认的摆放规则
  2. Stacking and float : 浮动元素的处理方式
  3. Adding z-index : 使用z-index来改变堆放顺序
  4. The stacking context : 内容堆放注意事项
  5. Stacking context example 1 : 在两层元素的第二层上使用z-index
  6. Stacking context example 2 : 在两层元素的所有层上使用z-index
  7. Stacking context example 3 : 在三层元素的第二层上使用z-index

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

原始文档信息

文档标签和贡献者

 此页面的贡献者: Go7hic, ziyunfei, teoli, ArthasTree
 最后编辑者: Go7hic,