我有一个<div>宽度设置为100%. 当我添加position:fixed它时，宽度会变16px大。
我注意到在身体8px上，四面都有边距，所以我猜这position:fixed是在某种程度上忽略了包含它的身体标签的边距。
我查看了MDN 参考，但找不到任何可以解释发生了什么的东西。
导致这种行为的原因发生了什么position:fixed变化？<div>
示例：http: //jsfiddle.net/UpeXV/
问问题
7009 次
4 回答
16
body自动具有8px边距。因此，当您将width元素的 设置为 时100%，它就变成了主体的宽度，8px两边都减少了。
但是当你给 element 时position:fixed，它不再是相对于 body 而是相对于 viewport 设置的，它没有边距。所以width现在是视口的宽度，是 2 *8px宽 -16px你观察到的。
这是有关该主题的 W3 文档：
带有 position:absolute 的元素的位置和尺寸是相对于其包含块的，而带有 position:fixed 的元素的位置和尺寸总是相对于初始包含块。这通常是视口：浏览器窗口或纸张的页面框。
于 2013-05-08T13:56:42.757 回答
1
于 2013-05-08T13:56:33.943 回答
1
这是固定元素的默认行为，因为固定元素不会在上下文中将其自身定位到其最近定位的父级，而是视口，因此在窗口中固定。正如您自己指出的那样，多出 16px 的宽度来自于一个事实，即主体的默认边距为 8px。
于 2013-05-08T13:56:50.913 回答
1
如果您需要固定元素为 100% 宽度，并且您仍然想要空间，您可以考虑使用box-sizing: border-box. 然后使用填充而不是边距来创建空间。这将允许固定元素跨越页面的宽度而不会越过。边距、边框和内边距总是添加到元素的尺寸中，除非您使用border-box模型，在这种情况下，宽度将包括内边距和边框。
于 2013-05-08T14:09:26.397 回答