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。

您应该知道这些信息是如何工作的。

一页上有多个Z-index元素

2 个答案: