Question

Please, have a look at: http://twitter.github.com/bootstrap/base-css.html

There are many examples like this one:

if you look closer to the block borders, you can see that the gray block is under the white one. Using the browser’s developer tools you can see that both boxes have an inherited z-index: auto;

I can’t reproduce this effect on my website (without using z-index).
So, my question is: Why is the gray block under the white one?

Answer 1

It’s because the first element has position:relative set on it, and the other one does not.

Here’s a simplified example.

Note that when you remove the relative positioning from the first element, it gets hidden by the second.