CODEWITHSUNDEEP
htmlcssz-index
flobar
flobar

Reputation: 121

How to give a child element a higher z-index than the parent element

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?

Upvotes: 7

Views: 3791

Answers (3)

flobar
flobar

Reputation: 121

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.

Upvotes: 0

Sam
Sam

Reputation: 1

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

Upvotes: -1

Yotam Omer
Yotam Omer

Reputation: 15366

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.

Upvotes: 3

Related Questions