添加"position: fixed;"可防止所有滚动，即使在未附加的元素上也是如此

Question

所以，应该相当直截了当，但我不知道为什么这不起作用（也许我累了）。

我试图在我的网页上添加固定的位置，这样我就可以得到一个不移动的漂亮背景，然后在顶部，一个可以滚动的文本空间（这样文本会移动，但图像保持不变）。但当我添加"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索引）

Answer 1

#Home-background正在包装#Homediv，如果是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>

Answer 2

我设法修复了它，问题是"Home"在"Home Background"中，尽管我仍然不明白为什么会破坏它。

以下解决了我的问题

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