有人能告訴我為什么position:fixed會導致元素比瀏覽器或頁面上的其他內容更寬并導致水平滾動嗎？

這是代碼 超文本標記語言

<header>
     this is a header
</header>

<div class="container">
     this is a container
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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代碼筆的鏈接

寬度以不同的方式應用于相對元素和固定元素、祖先邊距和樣式屬性，這些元素相對于它們的位置屬性是父元素可繼承的。

body標簽將有其默認的用戶代理樣式表8px邊距(http://www.w3.org/TR/CSS2/sample.html)

90%寬度的標題是固定的，沒有任何頂部、左側、右側或底部值，將被定位到最近的可用位置，但將繼承原始文檔/視窗大小，使其實際上為90%寬度，但定位在10px的“正文”邊距偏移處。 若要測試，請添加top:0；左:0；對于固定標題http://jsbin.com/ETAqADu/1/edit

。container是一個設置為relative position的塊級DIV元素，其寬度是可用父可用寬度的90%,即body innerWidth(不包括X軸上的10 + 10 px邊距)

不想要的結果: 邏輯上，標題將比寬20px。容器，因為位置固定會將元素移出體流。

修復: 通過將設置為0來控制父(正文)元素的默認邊距

body { margin: 0; }

或者一個小而重的CSS重置，比如:

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

另請參閱CSS盒模型-邊距折疊

我只在手機上遇到過類似的問題。盡管在任何父元素上都沒有邊距、邊框和填充，我的固定元素仍然比視口寬，并且我沒有使用width: auto的選項。

如果你不支持IE8及以下版本，你可以使用

width: 100vw

我可以使用視口單位:vw，vh，vmin，vmax嗎

公認的答案是好的，但在我的情況下，我只在移動設備上看到了比頁面其余部分更寬的固定標題。它碰巧是由頁腳中的某個元素引起的，該元素的像素寬度(在我的例子中是750px)比瀏覽器的視窗寬。

如果您想知道頁面上的某個元素是否導致了這個問題？只需打開你的瀏覽器控制臺，并刪除一些元素進一步下降。有時，您可能會注意到頁眉又變成了正確的寬度。您剛剛刪除的元素或其中的某個元素的寬度(以像素為單位)很可能比瀏覽器的視窗要寬。

在這種情況下，解決方案是要么將該元素設置為較小的寬度，要么使其具有靈活性。

默認情況下，body標簽有邊距。 在樣式表中嘗試這樣做:

body{
  margin: 0;
}

正如Salaw提到的，使用body { margin:0；}將解決問題，因為& ltbody & gt具有默認邊距/填充(取決于瀏覽器)。位置:固定；從文檔流中完全移除一個元素，并使其僅相對于視口，而position:relative；沒有。

鑒于這一事實，并且鑒于寬度:90%意味著“使該元素占據父元素可用空間的90%”，并且鑒于固定元素的父元素是視口，而該相對元素的父元素是具有其邊距的主體，因此存在大小差異。

參見http://codepen.io/anon/pen/exzpC

因為位置:固定表現為元素從文檔中分離，并放置在文檔最近的左上角，添加默認正文的邊距。這就是為什么如果你重新設置正文頁邊空白，它將占用與你的第二個div相同的空間。