CODEWITHSUNDEEP
javascriptjqueryhtmlcssz-index
Roboneter
Roboneter

Reputation: 897

CSS Z-index child above parent and div under parent

Goodday,

I have a setup of 2 div's like this

<div id="parent">
     <div id=child"><div>
</div>
<div id="underdiv"> </div>

CSS:

#parent { position: fixed; z-index: -1; width: 100%; height: 100%;  } 
#child { position: fixed; z-index: 10; width: 300px; height: 300px; }
#underdiv { position: relative; margin-top: 100%; z-index: 9;}

So what is want is de #parent fullscreen and when i scroll the underdiv comes over the parent. But the child is visible over the underdiv. Is this possible? It works when i put the #child outside the #parent, but this is not what i want.

demo: http://dailycms.develop.tvtweb.nl/profielpagina.html

Upvotes: 0

Views: 4029

Answers (1)

Chirag Bhatia - chirag64
Chirag Bhatia - chirag64

Reputation: 4526

Unfortunately, this isn't possible. z-index is only applicable when two elements are on the same level in the DOM tree (i.e. they have the same parent element).

You can find more details regarding this in this article, especially in the Stacking Contexts part in the article.

Also, here's a link to MDN's page on Stacking Context in z-index for a more detailed explanation.

Upvotes: 2

Related Questions