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

【问题标题】：Why does fixed positioning alter the width of an element?为什么固定定位会改变元素的宽度？
【发布时间】：2013-05-08 13:48:56
【问题描述】：

我有一个<div>，其宽度设置为100%。当我向其添加position:fixed 时，宽度会变大16px。

我注意到在 body 上，所有边都有8px 边距，所以我猜position:fixed 不知何故忽略了包含它的 body 标签的边距。

我查看了MDN Reference，但找不到任何可以解释发生了什么的东西。

position:fixed 对导致此行为的 <div> 有何更改？

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

【问题讨论】：

疯狂猜测：您不再处理 body 的填充，所以 width:100% 现在可能正在使用窗口宽度。
听起来像预期的行为？它扩展到文档宽度的 100%。
@Pekka웃 我并不是说这不是预期的行为，我只是想了解 为什么 它会发生
@BradChristie 也许，但body 有margin 并且没有填充。
@ChrisB：嗯，我想我是说<body> 和下一个子元素之间的 8px 间距是两个元素宽度差的一半。我可能应该插话说我不是 UI 人。我讨厌做 UI 和处理 CSS/布局，但如果我是一个赌博的人，那将是我的赌注。 fixed 它使它使用窗口大小而不是 body，因此宽度发生了变化。

标签： css position

【解决方案1】：

body 自动具有8px 的边距。所以当你将元素的width设置为100%时，它就变成了body的宽度，两边都减去了8px。

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

这是W3 documentation on the subject：

带有 position:absolute 的元素的位置和尺寸是相对于其包含块的，而带有 position:fixed 的元素的位置和尺寸总是相对于初始包含块。这通常是视口：浏览器窗口或论文的页面框。

【讨论】：

感谢您的时间，这有助于我了解 CSS 中位置更改时究竟发生了什么

【解决方案2】：

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

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

MDN CSS Position Reference

感谢您的 cmets。

【讨论】：

【解决方案3】：

这是固定元素的默认行为，因为固定元素不会在上下文中将其自身定位到其最近定位的父元素，而是视口，因此在窗口中被固定。正如您自己指出的那样，多出 16 像素的宽度是因为主体的默认边距为 8 像素。

【讨论】：

【解决方案4】：

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

见：http://css-tricks.com/box-sizing/

【讨论】：