Position Fixed Header goes behind text when Position Relative element is added

Question

So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.

Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.

I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.

.link {position: relative;}
.linkTo {position: absolute; top: -80px;}

The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.

I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.

I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.

Answer 1

Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.