为什么固定定位会改变元素的宽度？

Question

我的<div>宽度设置为100%。当我向其添加position:fixed时，宽度变得更大16px。

我注意到在身体上，所有边都有8px个边距，因此我猜测position:fixed在某种程度上忽略了包含它的body标签的边距。

我查看了MDN Reference，但无法找到解释发生了什么的任何内容。

position:fixed导致此行为的<div>变化了什么？

示例：http://jsfiddle.net/UpeXV/

Answer 1

body自动拥有8px的余量。因此，当您将元素的width设置为100%时，它会变为正文的宽度，而不是两边的8px。

但是当你给出元素position:fixed时，它不再相对于身体而是设置到没有边距的视口。因此，width现在是视口的宽度，宽度为2 * 8px - 您观察到的16px。

这是W3 documentation on the subject：

  

虽然具有position：absolute的元素的位置和尺寸是相对于其包含块的，但是position：fixed的元素的位置和尺寸始终相对于初始包含块。这通常是视口：浏览器窗口或纸张的页面框。

Answer 2

这是固定元素的默认行为，因为固定元素在上下文中不会将自身定位到最接近定位的父元素而是视口，因此在窗口中得到修复。正如你自己指出的那样，16px的宽度来自于身体的默认边距为8px。

Answer 3

如果您需要将固定元素设置为100％宽度，并且仍需要空间，则可以考虑使用box-sizing: border-box。然后使用填充而不是边距来创建空间。这将允许固定元素跨越页面的宽度而不会越过。除非使用border-box模型，否则边距和边框以及填充始终会添加到元素的尺寸中，在这种情况下，宽度将包括填充和边框。

请参阅：http://css-tricks.com/box-sizing/

Answer 4

当您将元素设置为position:fixed时，它看起来像视口的宽度而不是其父元素。

  

固定定位类似于绝对定位，但元素的包含块是视口。

MDN CSS Position Reference

感谢您的评论。