iStack iStack - 6 months ago 12
HTML Question

Position fixed header hidden behind content after using relative and absolute for content

I'm trying to achieve a header that will be fixed whenever I scroll so I used position:fixed for it

But then when I try to use relative and absolute for the content, the header gets hidden behind the content(image)

Thanks for any help in advance!

Code: https://goo.gl/O97XTG

Full screen: https://goo.gl/Kwk7Uy

Answer

Just add a z-index to the navigation. Since it appears before the content in the DOM it will be displayed BELOW it on the z-axis. Force it to a higher than 0 z-index as below:

.navbar {
    z-index:1;
}