Geek Answers Handbook

Does the child overlap another element despite a lower z-index?

So, I experimented with z-index today, and I really don't understand what is going on here.

Here's a very simplified version of 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 background content, then bubbles over the background, and finally content over the bubbles. Something happens for some reason, bubbles above the contents.

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

Give it a few seconds for the bubbles to appear above the contents. You cannot select text or click buttons because the bubble layer is above the content level, although it is set below. What's happening? Do children affect the parent index?

Any ideas?

+4
source share
2 answers

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

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

To do what you are trying to do .content-centered and .bubbles , there must be brothers and sisters.

+3
source

You can set event pointers to none for the bubbles element to prevent the links from being blocked below, although I don't think it has much support in IE.

 .bubbles { pointer-events: none; }

Demo

+2
source

More articles:


All Articles