添加“position：fixed;”可防止所有滚动，即使在未连接的元素上也是如此

So, should be fairly straightfoward but i don't know why this isn't working (maybe i'm tired).

所以,应该相当直接,但我不知道为什么这不起作用(也许我很累)。

I'm trying to add position fixed to my webpage so i get a nice background that doesn't move, and then over the top, a text space where you can scroll (so the text moves, but the image stays the same). But when i add "position: fixed;" it just stops scrolling all together and as far as i'm aware, it should only stop the scrolling of the part it's attached to. So here's my html

我正在尝试添加固定到我的网页的位置,这样我得到一个不移动的漂亮背景,然后在顶部,你可以滚动的文本空间(所以文本移动,但图像保持不变)。但当我添加“位置:固定;”它只是停止滚动所有在一起,据我所知,它应该只停止滚动它附加的部分。所以这是我的HTML

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

and my css

和我的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;
}

The marked position is what is causing the issue, but it should have no affect on the #Home set, right?

标记的位置是导致问题的原因,但它应该对#Home设置没有影响,对吧?

EDIT: I thought i should note, i am using other fixed elements ( i have a top bar and a menu bar at the side currently, both are fixed and both scroll till i add the fixed element as mentioned above. But having multiple fixed elements shouldn't stop other fixed elements from working either, right? (yes i've z-indexed them respectively)

编辑:我想我应该注意,我正在使用其他固定元素(我当前有一个顶栏和菜单栏,两个都是固定的,都滚动,直到我添加如上所述的固定元素。但有多个固定元素不应该阻止其他固定元素工作,对吗?(是的,我分别对它们进行z索引)

2 个解决方案

#1

#Home-background is wrapping the #Home div and will prevent scrolling if it is position: fixed

#Home-background正在包装#Home div,如果它是position:fixed,则会阻止滚动

To place a fixed background, put a background on the body.

要放置固定背景,请在背景上放置背景。

In your example it should look something like this:

在您的示例中,它应该看起来像这样:

no-repeat prevents the background image from repeating

无重复可防止背景图像重复
background-position: fixed prevents the image from scrolling

background-position:fixed可防止图像滚动
background-size: 100% 100% stretches the image to fit the body element

background-size:100%100%拉伸图像以适合身体元素

Note: The image in this example does not make it obvious that it is fixed, but it is :)

注意:此示例中的图像并未显示它已修复,但它是:)

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>

#2

I managed to fix it, the problem was "Home" being inside "Home-Background" although i still don't understand why that would break it.

我设法修复它,问题是“Home”在“Home-Background”里面,虽然我仍然不明白为什么会破坏它。

The following solves my problem

以下解决了我的问题

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

#1