Html 将div固定到位，但允许其被覆盖

我有一些代码如下：

<div class="header">
    <div class="container">
        <h1>Lorem <small class="text-muted">ipsum dolor sit amet.</small></h1>
        <p>
            Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. 
        </p>
        <a href="#" class="btn btn-lg btn-success">Donec</a><a href="#" class="btn btn-lg btn-info">Aenean</a>
    </div>
</div>

---

当你滚动时，下面的内容会向上移动，就像它覆盖了它一样，但是所有的文本都会随着你的滚动而移动。我希望文本保持固定，就像背景一样。我试过设置位置：固定；但是，对于容器，文本显示在以下div的顶部，并移动到忽略容器边距的一侧。我该怎么做？

将这三行添加到CSS.header

position: fixed;
z-index: -1;
top: 0;

此选项用于设置文本容器的样式：

.ContentText {
   margin-top: 100%; /* I added class="ContentText" to the div with the long text */
}

现在应该可以工作了：

更新：回应下面评论的最后一次尝试。看看这个：

---

这一次，您创建了一个class=space的div，该div正好提供所需的空间。

尝试使用z-index来判断应该打开哪个块top@Justcode快速示例，缺少一些CSS：如您所见，文本在滚动时覆盖背景图像，但是原始文本在背景上移动，而不是保持固定不变。@BenedictLewis举一个简单的例子，说明如何实现这个@Justcode现在下面的文本直接覆盖了背景图像。我希望它在你滚动之前保持隐藏，并且它应该滚动到容器中的背景图像和文本上。@BenedictLewis你必须为此应用填充，抱歉，不是我需要的。内容文本也有背景色，所以我不能使用填充，因为它会覆盖第一个文本。我想要的是，content div移到第一个上面的位置。请参阅更新版本。那你就得用边距而不是填充。我不太喜欢这样做，这很“黑”。如果你看一下我发布的链接，他们不会使用100%的边距或填充。如果你有一个模型，为什么不复制css规则，用你自己的背景和颜色替换呢？对不起，我不知道这有什么不对劲。它完全符合你的要求。但最后一次尝试：我在更新中为您提供了另一种方法。

.ContentText {
   margin-top: 100%; /* I added class="ContentText" to the div with the long text */
}