頁面佈局設置

我在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>

來源

2016-06-15 Becky

斑馬是一個固定的背景圖像或一個具有固定屬性的圖像的div。然後剩下的只是幾個div（在背景d的頂部），它們之間有很大的空間。之間的空間是透明的，所以你可以看到背景。簡單 –

我只是因爲某些原因無法使它工作。我的綠色圖層（斑馬圖層）不顯示。 https://jsfiddle.net/kL10Lvbg/3/ – Becky

@sergiureznicencu任何想法？ – Becky

繼承人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; 
    } 
}

那裏有提升空間，但要點是，廣告（綠格）絕對定位與廣告的水平相同iv包裹您的可滾動項目。

來源

2016-06-15 15:52:13 kriddy800

其實我認爲我知道了，但我沒有注意到你有'overflow：y-scroll'。這是行不通的。它需要像例子那樣是一個自然捲軸。 – Becky

頁面佈局設置

回答

相關問題