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

Question

I am having a little problem with z-indexing.

I have a title inside this link too. The header has a z-index of 5, and the link has a z-index of 15. When I open the modal, the dark text should be higher than the title, so I gave it a z-index 10. The problem is that the link inside the title should be above the text, but for her. I even assigned a link to a relative, but does nothing.

Can someone help me with this problem?

Answer 1

z-index refers to siblings of the same parent. you will need to remove <a> from <header> to create the desired effect.

If the parent has less z-index than modal, everything in it will be modal, regardless of children z-index

Please also attach jsFiddle or something so that we can show you how to fix it.

Answer 2

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

What I did, I used header as a container. Then I split the elements, which should be lower and higher overlay in a separate div with different z-index . I also used position: absolute; to correctly position them within the header . This way, you do not face the problem of children inheriting the parent index z.

Answer 3

You can specify the parent DIV z-index: inherit and your element inside the parent div. z-index is higher than overlay.