14

I wanted to set a top header in a fixed position and have content scroll underneath it and came across some strangeness. If I set a margin-top to the content div that margin would also affect the header and move it down even though it's set to position:fixed. I found a workaround by setting the content div to position:relative and using top: to offset it the same amount, but I find it strange that a non-nested div can affect a fixed-positioned element and would like to know why it happens.

I get the same thing in Safari, Firefox and Chrome. In Opera the margin pushes down the content and leaves the header in place, which is what I expected it to do, but compared to the other results maybe it's Opera that has it wrong. What I'm talking about can be in seen in this JSFIDDLE (don't use Opera! :) ).

Here's the code:

css:

body {
    background:#FFD;
}

#header {
    position:fixed;
    height:15px;
    width:100%;
    text-align:center;
    border-bottom:1mm dashed #7F7F7F;
    background-color:#EEE;
}

#content {
    width:90%;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E5FF;
    border: 1px solid #000;
}

html:

<body>
    <div id="header">
        HEADER
    </div>
    <div id="content">
        <p>Text1</p>
        <p>Text2</p>
        <p>Text3</p>
        <p>Text4</p>
    </div>
</body>
ivvi
  • 5,120
  • 5
  • 36
  • 53

4 Answers4

12
#header {
    top: 0px !important;
}
Seabass
  • 1,963
  • 12
  • 15
  • 7
    `!important` is not necessary. – Rob W Mar 08 '12 at 21:23
  • 2
    How embarrassing to have missed that. Thanks! Still, kind of odd to have the same margin applied to a non-descendent element, don't you think? – ivvi Mar 09 '12 at 16:59
  • 1
    Though this fix does work. It doesn't explain what the reasoning behind the content and header moving together. – steviesh Jul 31 '16 at 00:57
  • 1
    Here's a similar question that answers WHY @seron: http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers – steviesh Jul 31 '16 at 03:53
0

Or set the top padding (instead of top margin) for #content to be the height of #header.

We have figured the ways to correctly position the header, but I'm still very curious why the offset happened at the first place.

Littm
  • 4,923
  • 4
  • 30
  • 38
user1413795
  • 1
0

#content is fixed position, but the coordinates that you set for top, right, bottom and left are relative to its parent container: #header. In other words, #content is always going to be fixed to the top of #header. Since you are bumping #header down with margin, the #content will follow.

You either need to offset the margin

#content { position: fixed; top:-25px; }

That said, I assume you want to fix something to the top of the screen and I don't think this is going to get you what you want. You'll need to break #content out of #header or else make #header statically positioned: position:static so that the content is fixed to the top of the window, not the header.

Jeff
  • 13,943
  • 11
  • 55
  • 103
-1

I believe you are feeling the affects of "margin collapse", which is causing your "margin-top" entry in "content" to collapse into the body element of the page. An easy fix is to just create a containing div around "content" and "header" and set the CSS to "overflow:hidden". Then, be sure to set the margins and padding of the "body" element to 0.

Zensar
  • 817
  • 4
  • 8
  • From what I read of margin collapse margins fail to appear and not the other way around. Anyway "top: 0px" did it, as pointed out Zenbait. – ivvi Mar 09 '12 at 16:55
  • @seron I think what you read about margin collapse is incorrect. Margin collapse uses the greater of the two values to set the margin, quite the opposite of making margins fail to appear. See [this thread](http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers) for a more detailed explanation about how this causes the issue you described. – Adam Feb 09 '17 at 20:10