Today, I decided to dive into z-index and experiment with it. However, I am having trouble understanding the behavior.
Below is a simplified version of the HTML structure:
// 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 intention was to have .content as the background, bubbles on top of the background, and finally the actual content above the bubbles. But what's happening is that the bubbles are appearing over the content layer.
Check out the demo: http://jsfiddle.net/zFFkv/1/
Wait a few seconds for the bubbles to show up above the content. The text cannot be selected nor can you interact with the buttons because the bubble-layer is somehow above the content layer, despite being set below it. Why is this happening? Do child elements not inherit their parents' z-index?
Any thoughts or suggestions?