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

Question

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

像这样的例子还有很多：

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

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

Answer 1

这是因为第一个元素已经position:relative设置在它上面，而另一个没有。

这是一个简化的例子。

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

Answer 2

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

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