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值将定位到最近的可用位置 - ＆gt;但是会继承原始文档/视口大小，使其真正达到90％宽，只是位于10px'正文'边距偏移处。

为已修复 top:0; left:0; http://jsbin.com/ETAqADu/1/edit

测试添加header

.container是设置为block位置的relative级别DIV元素，将是可用父级可用宽度的90％宽度，即body innerWidth（不是计算10 + 10px边距（X轴））

结果：逻辑上header将比.container宽20px，因为固定位置会将您的元素移出body流。

修复：逻辑上，通过设置为0来控制您的父级（body）元素默认边距

Answer 2

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

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

width: 100vw

Can I use Viewport units: vw, vh, vmin, vmax

Answer 3

默认情况下，body标签有边距。
在样式表中尝试这个：

body{
  margin: 0;
}

Answer 4

因为position:fixed表现为元素与文档分离，并放置在文档的最近/左上角，所以添加默认正文的边距。这就是为什么如果重置body边距，它将占用与第二个div相同的空间量。

Answer 5

正如Salaw所提到的，使用body { margin: 0; }将解决问题，因为<body>具有默认的边距/填充（取决于浏览器）。 position: fixed;从文档流中完全删除元素，并使其仅与视口相关，而position: relative;则不相关。

鉴于这一事实，并且假设width: 90%表示“使此元素占用父元素可用空间的90％”，并且假定fixed元素的父元素是视口而父元素这个relative元素是带有边距的主体，你的大小差异。

请参阅http://codepen.io/anon/pen/exzpC

Answer 6

可以接受的答案很好，但就我而言，我看到的固定标题比页面的其余部分还要宽，仅在移动设备上。碰巧是由于页脚中的某个元素比浏览器的视口宽width像素（在我的情况下为width: 750px）。

如果您想知道页面上的某些元素是否对您造成了此问题？只需打开浏览器控制台，然后删除一些元素即可。在某些时候，您可能会注意到标题再次变为正确的宽度。可能是刚删除的元素或其中的某个元素比浏览器的视口宽width像素。

在这种情况下，解决方案是将元素设置为较小的宽度，或者将其设置为flexible。

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

6 个答案: