一页上有多个Z索引元素

Question

谁能告诉我这种效果是如何产生的？

链接至所需效果

因此，标题栏和图像保持静态，但是当您向下滚动网页时，内容区域与图像重叠，但与标题不重叠。

我认为标题和bg图片以及内容区域可能都具有不同的z-index，但是我似乎无法复制这种效果。

以下是我一直在本地玩的游戏：

<style type="text/css">

body{
    margin:0px;
    padding:0px;
}
#head{
    width:2000px;
    height:180px;
    background-color:#666;
    position: fixed;
    z-index: 10000;
}

#image{
    width:2000px;
    height:500px;
    background-color:#F00;
}

#content{
    width:2000px;
    height:1000px;
    background-color:#090;
}
</style>

<div id="head">HEAD</div>
<div id="image">IMAGE</div>
<div id="content">CONTENT</div>

Answer 1

将正文（或包装元素）设置为具有以下背景：

body { 
    background-attachment: fixed;
}

更多： http : //www.w3schools.com/cssref/pr_background-attachment.asp

即使页面滚动，这也迫使背景保持原样。

然后将内容添加到正文中...它将滚动，而正文的背景是静态的。

示例： https ： //jsfiddle.net/a8qpxzy2/2/

Answer 2

这是他们的做法。

header和bg-image都是固定的。 而content设置为relative 。

Headers z-index为10000， bg-image z-index为20， content z-index为2000。

您应该知道如何使用这些信息。