Search code examples
cssheaderscrollpositioninghtml

Scroll Main Conent OVER Fixed Header

I have been stumped by what I hope is a very simple problem. I have a page that consists of two divs:

<div id="header">...</div>
<div id="content">...<div>

The header will be fixed to the top of the page and the main content section will scroll normally. I need my main content div to scroll over the header, covering it up as it does so.

I can accomplish the look and feel I want by fixing the header to the top, giving the main content a margin-top large enough to be in the correct place, and adjusting the z-index so that the main content scrolls over the header. The problem is that when I do this the main content division's margin-top covers up all the links and hover elements of the header, making them visible, but inactive.

I really hope this is an easy fix. Could someone please suggest something? I am trying to do this without resorting to javascript. Thanks a lot in advance!

Solution

  • I actually had the same problem and come up with this http://jsfiddle.net/EWefL/

    <header><a href="/">Working header link</a></header>
<section>Section</section>

header {
    background:#cff;
    height:100px;
    position:fixed;
    right:0;
    left:0;
    z-index:100;
}

section {
    background: #579;
    height:600px;
    top:100px;
    position:relative;
    z-index:200;
}

    Basically using position relative and the top attribute instead of margin-top. One important thing to note is that the z-index always needs to be set higher than zero.