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

Question

我有一个<div>宽度设置为100%.当我添加position:fixed它时,宽度变16px大.

我注意到在身体8px上,所有方面都有边缘,所以我猜这position:fixed是在某种程度上忽略了包含它的身体标签的边缘.

我查看了MDN参考,但无法找到解释发生了什么的任何内容.

有什么position:fixed改变<div>导致这种行为？

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

Answer 1

该body自动拥有的保证金8px.因此,当您将width元素设置为时100%,它将成为身体的宽度,而不是8px两侧.

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

这是关于这个主题的W3文档:

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