加入“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-索引它们）

答

#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>

答

我设法解决这个问题，这个问题是“家”是在“家庭背景”里面，尽管我仍然不明白为什么会打破它。

下解决我的问题

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

加入“position：fixed;”防止所有滚动，即使在未连接的元素上

相关推荐