一個頁面上有多個Z-index元素

任何人都可以告訴我這種效果是如何創建的嗎？一個頁面上有多個Z-index元素

從而使標題欄和形象留靜態的，但是當你向下滾動網頁上的內容區域重疊的圖像，但沒有頭。

我認爲也許標題和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>

來源

2015-10-09 Pogostick

'inspect element'並試一試 –

是它的視差設計？ – Arun

它被稱爲視差設計 –

定身（或包裹元素）有一個背景：

body { 
    background-attachment: fixed; 
}

這迫使背景保持放置狀態，即使使用頁面滾動。

然後將您的內容添加到正文中... 它將滾動，而身體的背景是靜態的。

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

來源

2015-10-09 05:58:55 johnchinjew

是的..這是它！謝謝。 – Pogostick

當然！請幫助我並選擇它作爲正確的答案！ @Pogostick – johnchinjew

更多關於'視差'這裏：http://keithclark.co.uk/articles/pure-css-parallax-websites @Pogostick – johnchinjew

這裏是他們是如何做到的。

header和bg-image都是固定的。而content設置爲relative。

Headers的z-index爲10000，bg-image的z-index爲20和content的z-index是2000

你應該知道它是如何工作的這些信息。

來源

2015-10-09 06:03:15 Paran0a

一個頁面上有多個Z-index元素

回答

相關問題