Search code examples
csslayoutpositioning

Header fixed as footer

I created fiddle with header, content and footer.

You can see that CSS for header and footer are analogical. Footer behaves as I want but header collides with text when scrolling.

Do you know what is wrong?

thank you

Solution

  • As your content div is located after the header, its z-index is "higher" by default, so it will be "on top" of your header when you scroll.

    Add 

    z-index:1000;

    to your header css.