ページレイアウトの設定

Question

私はCnetのホームページを見ていますが、今はクールオーバーラッピングの設定があります。 Click to see their homepage。

これはどのように行われますか？

私はそれを理解しようとしましたが、私はそれをどうやって行うのか考えていません。私の例では、グリーンはCnetのホームページ（Zebras付き）の広告部分になります。

#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; 
 
}

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

Answer 1

相続人codepen

<div class="root"> 
    <div class="content"> 
    <div id="green"> 
     <label>ADD GOES HERE</label> 
    </div> 
    <div class="scroll"> 
     <div id="blue"></div> 
     <div id="red"></div> 
     <div id="yellow"></div> 
    </div> 
    </div> 
    </div 

CSS：

.content { 
    position: relative; 
    .scroll { 
    height: 500px; 
    overflow-y: scroll; 
    } 
    #blue, 
    #green, 
    #red, 
    #yellow { 
    height: 500px; 
    width: 100%; 
    } 
    #blue { 
    background: blue; 
    } 
    #green { 
    position: absolute; 
    top: 0; 
    z-index: -1; 
    background: green; 
    } 
    #red { 
    background: red; 
    margin-top: 500px; 
    } 
    #yellow { 
    background: yellow; 
    margin-top: 500px; 
    } 
} 

は改善する余地をtheresのが、要旨は、広告（緑のdiv）が絶対的に配置されていることです広告と同じレベルでivスクロール可能なアイテムをラップします。