Question

我有一些代码如下：

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

标题有固定的背景图片，并将整个页面填充为封面。

.header {
    background: #000 url(/img/cover.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 60px 0 60px 0;
    height: 100%;
}

当您滚动时，以下<div>向上移动，就像它覆盖它一样，但滚动时所有文本都会移动。我希望文本保持固定，就像背景一样。我已尝试将position: fixed;设置为container，但文字显示在以下div的顶部，并且会移到忽略container边距的一侧。我怎么能这样做？

Answer 1

将这三行添加到CSS .header

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

这是为文本容器设置样式：

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

现在应该工作：

http://jsfiddle.net/Matrp/6/

更新：上次尝试回复以下评论。看看这个：

http://jsfiddle.net/Matrp/9/

这次你用class =＆＃34; space＆＃34;创建一个div。这就是提供所需的，良好的空间。

修复div到位，但允许它被覆盖

1 个答案: