页面布局设置

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

页面布局设置

回答

相关问题