为什么滚动栏会影响固定/绝对元素的宽度，而不会影响静态/相对

Question

我们注意到使用scrollbar"自动显示"时的所有浏览器在OSX下的所有浏览器 - feature vs."始终可见"（请参阅OSX设置 ->常规）。

如果切换到"始终"，则比切换到"自动"时的固定/绝对元素的宽度少15px。

我基本上可以理解"始终"滚动条使用固定空间与"自动"卷轴对内容的某种覆盖。

但是，为什么在地球上对

很重要

position:fixed/absolute

元素，但不是

position:static/relative?

我做了一个小提琴来证明问题，但是，您必须切换系统设置才能注意：https://jsfiddle.net/n4jtpwvw/

所需的最终重点：蓝色（#navigation）和红色（#main）div都应该完美地对齐，无论客户在scrollbar上设置如何。

Answer 1

具有固定位置/绝对位置的元素通常从正常文档流中取出。这里有一个很好的答案。

关于您的代码，请查看此更新的JSFIDDLE，在切换该OSX Option On和Off时为我工作

https://jsfiddle.net/n4jtpwvw/1/

.w1 {
  ...
  max-width: 300px;
  margin: 0 auto;
}
#navigationWrapper {
  ...
  max-width: inherit;
}

我在.w1上设置了最大宽度，并自动边距。然后，我从#navigationwrapper中取出左右属性，让它从.w1