Question

So i’ve been experimenting with z-index today, and i really do not understand what is happening here.

Here’s a very simplified version of the HTML:

// content has z-index of 30, pos abs
<div class="content">
    // content-centered has z-index of 32, pos rel
    <div class="content-centered">
        // Text and buttons goes here
    </div>
</div>

// bubbles has z-index of 31, pos abs
<div class="bubbles">
    <div class="bubbles-centered">
        // Bubbles goes here
    </div>
</div>

The goal is to have .content provide the background content, then the bubbles above the background, and at last the content above the bubbles. What is happening is for some reason the bubbles are above the content.

See demo: http://jsfiddle.net/zFFkv/1/

Give it a few seconds for the bubbles to appear over the content. You can’t select the text or push the buttons, because the bubble-layer is above the content layer, even though it’s set below. What’s going on? Does child elements not inherit the parents index?

Any ideas?

Answer 1

z-indices are resolved relative to their parent, not the whole document.

.bubbles are above .content, and that’s all that matters in your case. All the children inside .content will be below .bubbles, but can be ordered relative to each other.

To do what you’re trying to do .content-centered and .bubbles will have to be siblings.