position:fixed导致元素比浏览器宽

Question

任何人都可以告诉我为什么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的链接

Answer 1

这是因为宽度不同地应用于relative和fixed元素取决于容器margin和父可继承的样式属性 - 分别对应于它们的position属性,例如(你猜对了)width.

由于,如果你不使用任何CSS复位这样丑陋的家伙*{margin:0; padding:0;}
的body标签将它的默认加上了8px利润率(http://www.w3.org/TR/CSS2/sample.html)

header被固定,而无需任何top,left,right或bottom值将被定位为最接近的可用的地方- >但将继承原文件/视口尺寸,使得它确实90%宽,只是定位在10px的"身体"余量抵消.

为了测试增加top:0; left:0;了固定 header http://jsbin.com/ETAqADu/1/edit

.container作为block设置为relative位置的级别DIV元素,将是可用父级可用宽度的90%宽度,即bodyinnerWidth(不计算10 + 10px边距(X轴))

结果:逻辑上header将比.container原因位置宽20px 将元素移出body流量.

修复:逻辑上,body通过设置为0来控制parent()元素的默认边距

Answer 2

我只在移动设备上遇到了类似的问题.尽管没有边距,边框,任何父母的填充,我的固定元素仍然比视口宽,我没有选择使用width: auto.

如果您愿意不支持IE8及以下版本,您可以使用

width: 100vw

我可以使用Viewport单位:vw,vh,vmin,vmax