Problem mit der Überlappung und Positionierung von divs behoben

Question

Ich suche auf der Startseite von Cnet und versuche, ihre Überlappung Slide-Down-Ebene zu duplizieren. Click to see their homepage

Wie genau wird das gemacht? Ich weiß, es hat damit zu tun, dass die mittlere Schicht fest positioniert ist und dann z-index und eine hohe margin-top zwischen Schichten, ich kann es einfach nicht herausfinden.

Irgendwelche Ideen?

#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

Meinst du so?

Setzen Sie position auf andere als static auf Ihren nicht festen divs für z-index, um richtig zu arbeiten.

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>