CODEWITHSUNDEEP
jqueryhtmlcss
Kwaasi Djin
Kwaasi Djin

Reputation: 125

z-index in inner div higer than parent div

Is it possible for the z-index of an inner div to be of a higher value and stack above its parent div.

For instance

css 

#parentdiv{
    z-index: 10;
}

#childiv{
    z-index:12;
}

I need this to work because the inner div by default it hidden when it is set to display I want it to be above another div (seconddiv) with z-index:11; however, the parent div must be below seconddiv. I'm sure I can do this using jquery but I was wondering if this could work using css only

Upvotes: 0

Views: 189

Answers (2)

Jamie Collingwood
Jamie Collingwood

Reputation: 689

The answer would be yes. That is exactly what z-index is for. Think of z-index kind of like layers in Photoshop. In your example above, #childiv would be sitting on top of #parentdiv. You can also go into negative z-index as well. As mentioned above you do need to set position. 

#parentdiv {
position:relative;
z-index:10;
}

#childiv {
position:absolute;
z-index:12;
}

Added a Fiddle to help you out. http://jsfiddle.net/9UMc9/

Upvotes: 1

kmoe
kmoe

Reputation: 2083

I had a similar problem in which I was trying to put a second div "in between" a parent and a child. Unfortunately this is not possible with pure CSS.

Upvotes: 0

Related Questions