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

Question

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

Answer 1

您可以做的一件事是z-index将该元素的 设置为-1。但是，我相信您必须position:relative;在所有内容上加上 a ，因为如果我没记错的话，有些浏览器会忽略z-index具有position:static;. 另外，您是否考虑过简单地将该图像设置为具有 css 的页面的背景图像？
更新
由于我不知道您的代码的确切性质，我可以建议您如何完成此操作的基本模型：
小提琴：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>