z-index question

[Arvid]

I’m trying to place an element behind its parent container using z-index. The parent is positioned relative and the child element absolutely. The child elemment is a nav containing a ul with li’s in it. Each li contains a link. I’ve set the z-index of the parent to be higher than the z-index of the nav, and I am clueless as to why the nav continues to be placed on top of its parent div. I’d really apreciate any help, thanks!

[Mottie]

Did you try setting the nav z-index to a negative number? If you are still having issues, please share a demo of the problem on jsFiddle.net.

[Arvid]

I did. The nav is negative z-index and its container has a positive value.

Here’s a link: http://dabblet.com/gist/1542051

Thank you for the quick reply, I’m sure I’m missing something obvious.

[Mottie]

Oh, remove the “z-index: 10;” from the “.wrapper”.

[Arvid]

Thanks a lot! May I ask why it works like that?

[Arvid]

Oh and how would I make it clickable and hoverable again, when it’s outside of the container?

[workinclasshero]

Inheritance

[Arvid]

Care to elaborate? Love the name btw

[Anonymous]

Z-index is the CSS property that defines the stack order of any element. Element with greater stack order is placed in front of element with lower stack order.

VPN

[Arvid]

Yes, but how would I make thee element with the lower z-index hover/clickable if it’s visible outside it’s continer?

[Author]

Posts