如何为子元素提供比父元素更高的z-index

Question

I've run into a small problem with z-indexing.

I have a header and inside that a link. The header has a z-index of 5, and the link has a z-index of 15. When I open up a modal, the dark overlay should be above the header, so I gave it a z-index of 10. The problem is that the link within the header should be above the overlay, but it's behind it. I've even given the link a position of relative, but it does nothing.

Can anyone help me with this problem?

Answer 1

z-index is relative to the siblings within the same parent. you will have to take the <a> out of the <header> to create the desired effect.

If the parent has lower z-index than the modal, everything in it will be behind the modal, regardless of the children's z-index

Please also attach a jsFiddle or something so we can show you how to fix this.

Answer 2

If anyone else ever has this problem, here's a possible solution: http://jsfiddle.net/flobar/r6zeoc0y/

What I did was I used the header as a container. I then seperated the elements that needed to be below and above the overlay into seperate div 's with different z-index . I also used position: absolute; to position them correctly within the header . Like so you don't run into the issue of the children inheriting the parent's z-index.

Answer 3

You can give the parent DIV z-index: inherit and your a element inside the parent div. z-index higher then the overlay.