12

I have a <div> that has its width set as 100%. When I add position:fixed to it, the width becomes 16px larger.

I noticed that on the body, there are 8px margins on all sides, so I am guessing that position:fixed is somehow ignoring the margins of the body tag in which it is contained.

I looked at the MDN Reference but was unable to find anything that explains what is going on.

What has position:fixed changed about the <div> that causes this behavior?

Example: http://jsfiddle.net/UpeXV/

Chris Bier
  • 14,183
  • 17
  • 67
  • 103
  • 2
    wild guess: You're no longer dealing with the `body`'s padding so `width:100%` is probably using the window width now. – Brad Christie May 08 '13 at 13:50
  • Sounds like the expected behaviour? It's spreading out to 100% of the document's width. – Pekka May 08 '13 at 13:50
  • @Pekka웃 I'm not saying that it isn't the expected behavior, I am just trying to understand *why* it is happening – Chris Bier May 08 '13 at 13:51
  • @BradChristie Perhaps, but `body` has `margin` and no padding. – Chris Bier May 08 '13 at 13:51
  • @ChrisB: Well, i guess I'm saying the 8px spacing between `` and the next child element is half the width difference in the two elements. I should probably interject and say I'm not a UI guy. I hate doing UI and dealing with CSS/layouts, but if I were a gambling man that'd be what I'd bet on. `fixed` it making it use window sizing instead of `body`, thus the width change. – Brad Christie May 08 '13 at 13:54
  • @BradChristie Thanks for the input man, that was spot on. – Chris Bier May 08 '13 at 14:08

4 Answers4

16

The body automatically has a margin of 8px. So when you set the width of your element to 100%, it becomes the width of the body, less 8px on both sides.

But when you give the element position:fixed, it no longer is set relative to the body but to the viewport, which doesn't have margins. So the width is now the width of the viewport, which is 2 * 8px wider - the 16px that you observe.

Here's the W3 documentation on the subject:

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

ASGM
  • 11,051
  • 1
  • 32
  • 53
2

If you need the fixed element to be 100% width, and you still want space, you can consider using box-sizing: border-box. Then use padding, rather than margins, to create space. This will allow the fixed element to span the width of the page without going over. Margins and borders and padding are always added to the dimensions of an element, unless you use the border-box model, in which case width will include padding and borders.

See: http://css-tricks.com/box-sizing/

aaronburrows
  • 994
  • 4
  • 16
1

It looks like when you set an element to position:fixed, it takes on the width of the viewport instead of its parent.

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.

MDN CSS Position Reference

Thanks for your comments.

Chris Bier
  • 14,183
  • 17
  • 67
  • 103
1

This is the default behavior for fixed elements, since a fixed element does not orientate itself in context to its closest positioned parent but the viewport, thus getting fixed in the window. The 16px more width come from the fact, as you pointed out yourself, that the body has a default margin of 8px.

Simon
  • 7,182
  • 2
  • 26
  • 42