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

我有一个

，它的宽度设置为

100%

。当我向其添加

position:fixed

时，宽度将变大

16px

我注意到在主体上，有

8px

边距，所以我猜

position:fixed

在某种程度上忽略了包含它的主体标记的边距

我看了一下照片，但找不到任何东西来解释发生了什么

导致此行为的

的

位置发生了什么变化？

示例：
当您将元素设置为
位置：fixed
时，它显示视口的宽度，而不是它的父元素

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


感谢您的评论。
正文自动具有
8px的边距。因此，当您将元素的
宽度设置为
100%
时，它将成为主体的宽度，两侧的
8px

但是，当您指定元素
位置：fixed
时，它不再是相对于主体而设置的，而是相对于没有边距的视口设置的。因此，
width
现在是视口的宽度，宽2*
8px
您观察到的
16px

以下是：

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

这是固定元素的默认行为，因为固定元素不会在上下文中将自身定向到其最近的父元素，而是视口，因此在窗口中得到固定。16PX更多的宽度来自于事实，正如您指出的那样，主体具有默认的8px的余量。
 如果您需要固定元素为100%的宽度，并且仍然需要空间，可以考虑使用<代码>框大小：边框< /代码>。然后使用填充而不是边距来创建空间。这将允许固定元素跨越页面的宽度，而无需翻页。边距、边框和填充始终添加到元素的标注中，除非使用
边框框
模型，在这种情况下，宽度将包括填充和边框

请参阅：
胡乱猜测：您不再处理
主体的填充，因此
宽度：100%
现在可能正在使用窗口宽度。听起来像预期的行为吗？它正在扩展到文档宽度的100%。@Pekka웃 我并不是说这不是预期的行为，我只是想理解为什么会这样happening@BradChristie也许吧，但是
body
有
margin
并且没有填充。@ChrisB：我想我是说
和下一个子元素之间的8px间距是两个元素宽度差的一半。我可能应该插嘴说我不是一个用户界面的人。我讨厌做UI和处理CSS/布局，但如果我是一个赌徒，我会赌这一点<代码>修复了
它使它使用窗口大小而不是
主体
，因此宽度会发生变化。这有助于我了解CSS中位置变化时的具体情况感谢您的时间