固定定位元素顶部的流动物体

Question

我看到网站的一种新时尚是元素向下滚动页面并消失在其他元素后面（例如，一张大图像消失在带有文本的白色背景后面。）我正在尝试实现类似的效果，其中一个固定位置的图像滚动在其他元素之后。我遇到的问题是 z-index 对固定定位的元素没有影响，因为它们超出了正常流程。有没有一种 css 方法可以将固定元素定位在其他元素后面？

Answer 1

您可以做的一件事是将该元素的z-index 设置为-1。但是，我相信你必须在它上面的所有东西上加上一个position:relative;，因为如果我没记错的话，一些浏览器会忽略z-index 用于具有position:static; 的元素。另外，您是否考虑过简单地将该图像设置为具有 css 的页面的背景图像？
更新
由于我不知道您的代码的确切性质，我可以建议您如何完成此操作的基本模型：
Fiddle:http://jsfiddle.net/jatN2/
CSS强>

#bg {
    position:fixed;
    height:100%;
    width:100%;
    z-index:-1;
}
#wrapper {
    position:absolute;
    z-index:1;
    background:transparent;
}
body {
    font-family:Arial, Helvetica, sans-serif;
    background:transparent;
}
.content {
    padding:20px;
    background:#FFF;
    margin:0px;
    display:block;
}

HTML

<img src="<!--Your background image here -->" id="bg" />
<div id="wrapper">
    <div class="space"><!--Just a placeholder for the area where you want the background image to show. Give this element a height so it'll show the bg for that amount of height --></div>
    <div class="content">
        <!--Put your content here -->
    </div>
</div>