divを重複して固定する問題

Question

私はCnetのホームページを見て、オーバーラップするスライドダウンレイヤを複製しようとしています。 Click to see their homepage

これはどのように正確に行われていますか？私はそれが固定されている中間層としなければならないことを知っているとz-indexと高い間margin-top層間、私はそれを把握することはできません。

アイデア？

#blue, #green, #red { 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 
#blue { 
 
    background: blue; 
 
    z-index: 1; 
 
} 
 
#green { 
 
    background: green; 
 
    position: fixed; 
 
    margin-top: 200px; 
 
} 
 
#red { 
 
    background: red; 
 
    z-index: 1; 
 
    margin-top: 500px; 
 
}

<div id="blue"></div> 
 
<div id="green"></div> 
 
<div id="red"></div>

Answer 1

あなたはこのように意味しますか？

をの固定ディビジョンのstatic以外に設定すると、正常に動作します。

htmlk, body { 
 
    margin: 0; 
 
} 
 
#blue, #green, #red { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 
#blue { 
 
    position: relative; 
 
    background: blue; 
 
    z-index: 2; 
 
} 
 
#green { 
 
    background: green; 
 
    position: fixed; 
 
    margin-top: 50px; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
#red { 
 
    position: relative; 
 
    background: red; 
 
    z-index: 2; 
 
    margin-top: 200px; 
 
}

<div id="blue"></div> 
 
<div id="green"></div> 
 
<div id="red"></div>