CODEWITHSUNDEEP
htmlcss
kastulo
kastulo

Reputation: 851

z index of children of different divs

im having trouble with some z-index stuff

lets say i have the following

<div id="A"> z-index = 2
   <div id="B"></div> 
</div>

<div id="C"> z-index = 1
   <div id="D"></div>
</div>

I want "D" to be on top of "B"

of course this is just an example, i know if i swap the z-index of A and C ill get what i ask, but obviously is far more complex than this, but the essence is this, given the circumstances that i post, how can i make so that D is on top of B??

please help!!

Upvotes: 1

Views: 284

Answers (1)

David Storey
David Storey

Reputation: 30404

You can not achieve that without changing the z-index of A and C.

The way stacking context works in CSS is that when a new stacking context is created (by setting a z-index and either positioning the element, or setting the opacity < 1), it is limited by its parent or descendent’s stacking context. That is, if C has a lower z-index value than its sibling A, any descendants of C can not be higher than A or its descendants. It is like A is infinitely higher than C, so even if D has z-index of 1000000000, it wouldn't be as high as C.

You can think of it as sections of a book, where 1.10 is before 2.1, as is 1.10000.

Upvotes: 1

Related Questions