加入「position：fixed;」防止所有滾動，即使在未連接的元素上

因此，應該相當直接，但我不知道爲什麼這不起作用（也許我很累）。加入「position：fixed;」防止所有滾動，即使在未連接的元素上

我想添加位置固定到我的網頁，所以我得到一個不移動的好背景，然後在頂部，您可以滾動的文本空間（所以文本移動，但圖像停留一樣）。但是，當我添加「位置：固定;」它只是一起停止滾動，就我所知，它應該只停止滾動它所連接的部分。因此，這裏是我的html

<div id="Home-background"> 
     <div id="Home"> 
      <a name="Home"></a> 
       <div class="page-padding"></div> 
     </div> 
    </div>

和我的CSS

#Home-background { 
    **position: fixed;** 
    z-index: 1; 
    top: 20px; 
    width: 100%; 
    background: url('Pictures/lords-fallen-art-wallpapers-1080p.jpg'); 
    background-size: 100%, 100%; 
    padding-top: 0px; 
    min-height: 700px; 
} 

#Home { 
    position: relative; 
    z-index: 10; 
    top: 400px; 
    width:70%; 
    min-height: 3000px; 
    background:#ffffff; 
    padding-top: 50px; 
    padding-bottom: 100px; 
}

的顯着位置，什麼原因造成的問題，但應該沒有對#Home集的影響，對不對？

編輯：我想我應該注意到，我正在使用其他固定元素（我有一個頂部的酒吧和菜單欄在目前，這兩個都是固定的，都滾動，直到我添加如上所述的固定元素。有多個固定的元素不應該由任何工作，對嗎？（是的，我已經分別Z-索引它們）

來源

2014-10-10 Spratters53

#Home-background被包裹#Home股利和防止滾動，如果它是position: fixed

停止其他固定元素要放置固定背景，請在背景上放置背景。

在你的榜樣應該是這個樣子：

no-repeat防止背景圖像從重複
background-position: fixed防止圖像滾動
background-size: 100% 100%延伸到適合身體元素的圖像

注：在這個例子中的圖像不使它明顯，這是固定的，但它是:)

body { 
 
    margin: 0; 
 
    background: url('http://www.placehold.it/1000') no-repeat; 
 
    background-size: 100% 100%; 
 
    background-position: fixed; 
 
} 
 
#Home { 
 
    position: relative; 
 
    width: 70%; 
 
    min-height: 3000px; 
 
    background: #ffffff; 
 
    padding-top: 50px; 
 
    padding-bottom: 100px; 
 
}

<div id="Home"> 
 
    <a name="Home"></a> 
 
</div>

來源

2014-10-10 08:48:23 misterManSam

我設法解決這個問題，這個問題是「家」是在「家庭背景」裏面，儘管我仍然不明白爲什麼會打破它。

下解決我的問題

<div id="Home-background"></div> 
<div id="Home"> 
    <a name="Home"></a> 
     <div class="page-padding"></div> 
</div>

來源

2014-10-10 08:51:16 Spratters53

加入「position：fixed;」防止所有滾動，即使在未連接的元素上

回答

相關問題