Question

我有一个固定背景的网站和另一个小图像，它位于我已经成功定位的页面中心，但是当我尝试放入另一个应该保留文本的div时出现问题和内容，它位于图像下方。

你可以在这里查看我的例子:(请不要担心URL！它不是任何狡猾或令人作呕的东西，它只是我在域周围的粪便）。 http://liquid-shit.com/csstest.php（页面）

（SO只允许我发布一个超级链接，所以这里是链接到css与它取消链接，删除/之间的空间）

http：/ / liquid-shit.com/csstest.css（页面）

正如您在页面底部看到的那样，文本上方有两个小白色华丽图像。我试过改变html和z-index等中div的顺序。

我的CSS有点生疏，这个让我卡住了。

提前致谢 - 本

Answer 1

固定定位将始终位于流量（正常）定位之上。您需要更改#content以使用绝对或固定定位，然后正确定位元素。

这是更新的CSS：

#content {
    width:200px;
    min-height:100%;
    margin:auto;
    z-index:1;
    position:absolute;
    left:50%;
    margin-left:100px; /* half the width to obtain proper offset */
}

Answer 2

查看http://liquid-shit.com/csstest.php的源代码后，您需要将您的内容和固定框分成两个单独的div

<body>
    <div id="content">
        lorem ipsume says put your content here.
    </div>

    <div id="footer">
        &nbsp;
    </div>

</body>

修正#footer的位置并将其设为高z-index，以便让#content的内容落后于此。

Answer 3

我认为你正在寻找使用以下CSS的效果。（这也消除了对pattern div的需要。）

html, body {
background-color:#000f2f;
background-image:url(backgroundgradient.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom;
height:100%;
}

#content {
background-image:url(pattern.png) ; 
background-attachment: fixed;
background-repeat:no-repeat;
background-position:bottom;
width:200px;
min-height:100%;
margin:auto;
z-index:1;
}

编辑：修复了之前编辑中的复制/粘贴错误。

CSS问题：位于固定位置Div下方的文本

3 个答案: