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正在包裹#Home div并阻止滚动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>

添加＆＃34;位置：固定;＆＃34;防止所有滚动，即使在未连接的元素上也是如此

2 个答案: