有人能告诉我为什么 position:fixed 会导致元素比浏览器或页面上的其他内容更宽，从而导致水平滚动吗？
以下是代码 HTML
<header>
this is a header
</header>
<div class="container">
this is a container
</div>
CSS
header {
width: 90%;
height: 100px;
background: blue;
position: fixed;
z-index: 100;
}
.container {
width: 90%;
height: 500px;
background: red;
position: relative;
z-index: -2;
}
这里是指向 CodePen 的链接http://codepen.io/colbydodson/pen/wcgua
宽度在relative和fixed元素、祖先的margin以及与其position属性相关的可继承样式属性中应用不同。
body标签将具有默认的用户代理样式表8像素边距（http://www.w3.org/TR/CSS2/sample.html）
top:0; left:0;http://jsbin.com/ETAqADu/1/edit。.container 是一个设置为 relative 定位的块级 DIV 元素，它将占用可用父元素宽度的 90%，即 body 的 innerWidth（不包括 X 轴上的 10 + 10 像素边距）。
不希望的结果：
逻辑上，header 将比 .container 宽出 20 像素，因为固定定位会将你的元素移出 body 流。
修复方法：
通过将父元素（body）的默认边距设置为 0 来控制。
body { margin: 0; }
或者一个小而重的CSS重置，像这样：
/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }
我遇到了类似的问题，只是在移动设备上出现。尽管所有父元素都没有设置边距、边框和填充，但我的固定元素仍然比视口宽，而我又不能使用 width: auto。
如果你不想支持IE8及以下版本，可以使用
width: 100vw
width。默认情况下，body 标签有一个边距。
尝试在您的样式表中添加以下内容：
body{
margin: 0;
}
因为position:fixed的行为就像元素从文档中分离出来，放置在文档的最近的左上角，并添加默认的body边距。这就是为什么如果您重置了body的边距，它将占用与第二个div相同的空间。
position: fixed; 而不是 static。 - Roko C. Buljanbody { margin: 0; }将解决问题，因为<body>具有默认的margin/padding（取决于浏览器）。position: fixed;会完全从文档流中移除一个元素，并使其仅相对于视口定位，而position: relative;则不会。width: 90%的意思是“使此元素占用父元素可用空间的90%”，并且fixed元素的父级是视口，而此relative元素的父级是带有margin的，因此您会发现大小上的差异。