在没有z-index的情况下阻止z-定位

Question

请看一下：http://twitter.github.com/bootstrap/base-css.html

有很多像这样的例子：

如果你仔细观察块边界，可以看到灰色块位于白色块下面。使用浏览器的开发人员工具，您可以看到这两个框都有一个继承的z-index: auto;

我无法在我的网站上重现此效果（不使用z-index） 所以，我的问题是：为什么灰色块在白色块下？

Answer 1

这是因为第一个元素设置了position:relative，而另一个元素没有设置。

<强> Here's a simplified example.

请注意，当您从第一个元素中删除相对定位时，它会被第二个元素隐藏。

Answer 2

白色容器设置为使用position:relative，将其置于灰色框的前面。

如果灰色框也设置为使用position:relative，则需要在白色容器下方显示较低的z-index。