位置：固定导致元素比浏览器宽

谁能告诉我为什么position:fixed会导致元素比浏览器或页面上的其他内容更宽并导致水平滚动？

这是代码 超文本标记语言

<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;
}

这是代码笔的链接http://codepen.io/colbydodson/pen/wcgua http://codepen.io/colbydodson/pen/wcgua

Width以不同的方式应用于relative and fixed元素、祖先margin，以及可父级继承的样式属性position财产。

The body标签将有其默认的用户代理样式表8 像素边距 (http://www.w3.org/TR/CSS2/sample.html http://www.w3.org/TR/CSS2/sample.html)

header90%宽度，是fixed, without any top, left, right, or bottom值将被定位到最近的可用位置，但会继承original文档/视口大小，使其实际上宽 90%，但定位在 10px 的“主体”边距偏移处。 要测试，请添加top:0; left:0;为了fixed header http://jsbin.com/ETAqADu/1/edit http://jsbin.com/ETAqADu/1/edit

.container是一个块级 DIV 元素设置为relative位置，将是可用父可用宽度的 90% 宽度，这是bodyinnerWidth（不包括 10 + 10pxX 轴上的边距）

不想要的结果:
逻辑上header将比宽 20px.container因为位置固定将你的元素移出body flow.

Fix:
控制你的父母（body) 元素默认边距设置为 0

body { margin: 0; }

或者是小而重CSS重置 like:

/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }

另请阅读CSS 盒模型 - 边距折叠 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing