网页中的z-index如何用

 

css中z-index也是常用的一个属性，这个z-index说的就是第三轴的位置，网页实际是二维的，但是页面上的元素堆叠的层次就可以看作为第三轴，所以z-index也就很好理解了，在z轴上的索引。好吧我再说的直白一点这里的z-index指的就是哪个元素显示在上面，哪个显示在下面，数值越大的越靠上，会把z-index值比较小的元素挡住。这里的上是指距离用户近。

在w3的标准文档中指出，z-index属性是针对一个确定位置的盒子（positioned box）起作用的。它指出了：

1. 盒子的在当前堆叠环境中的堆叠层次
2. 这个盒子是否创建了一个堆叠环境

z-index的值可以是三种:auto，数值，inherit。

数值：

数值即是盒子在当前的堆叠环境中的堆叠层次。这个盒子也会建立一个新的堆叠环境。

auto：

生成的盒子的堆叠层次在当前堆叠环境中是0。除非它是根元素，否则它不会建立一个新的堆叠环境。

要注意的是，只有设置了对象元素的position不为static的时候z-index才能起作用。也就是需要同时设置position，让对象元素positioned，以及设置了z-index属性这样才能建立一个堆叠环境。如果你的元素未设置position，你把它的z-index设为9999也没用…

再就是堆叠环境的问题，你的z-index是针对当前堆叠环境的，两个元素之间的对比是要看其堆叠环境，而不能单纯的看其z-index的绝对值。

如果#d_4与#d_2发生重叠的话,#d_4会覆盖#d_2。这是因为#d_4所在的堆叠环境#d_3的z-index比#d_2的堆叠环境#d_1的z-index高。

后面还有一个问题，如果两个元素在同一个堆叠环境中，而且z-index的值也相同，其堆叠的层次该怎么表现呢？这个问题也很简单，按照文档的顺序来，后来的居上:)

说到这z-index的一些特性已经介绍的的差不多了，你肯定还有一个问题，对，那就是IE，我们没有提IE下的bug，当然IE的bug是不能缺席的，IE下如果你的元素设置了position那IE就会自动创建一个堆叠上下文，即使你没有设置z-index。所以在IE下发生z-index堆叠错误的时候先检查一下你的发生错误的元素是否已经positioned，然后给它设置一个合适的z-index。

这里是我写的一个简单的实例zindex-demo

相信大部分同学已经对z-index非常熟悉了，我这里写这篇文章主要是应slllllll的要求，因为可能很多同学是搜z-index这个关键字进来的，点开之后发现竟然没有任何关于css中z-index的内容，未免有些懊恼，所以为了让我们的z-index不至于太坑人，就有了这篇文章。如有谬误还请不吝指教。如果能够对您有所帮助我会很高兴。

有部分内容是翻译了w3的标准，原文详见：

http://www.w3.org/TR/CSS2/visuren.html#z-index

---