一頁上有多個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。

您應該知道如何使用這些信息。