一页上的多个 Z-index 元素

Question

谁能告诉我这个效果是怎么做出来的？

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

我想也许 header 和背景图片和内容区域都有不同的 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（或环绕元素）的背景为：

body { 
    background-attachment: fixed;
}

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

即使页面滚动，这也会强制背景保持不变。

然后将您的内容添加到 body... 它会滚动，而 body 的背景是静态的。

示例：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 元素

Multiple Z-index Elements on One Page

html

css

position

z-index