css – 在滚动上叠加div

前端之家收集整理的这篇文章主要介绍了css – 在滚动上叠加div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
而不是向下滚动页面来查看一堆div,我希望它们覆盖在同一个地方 – 一个堆叠在下一个顶部 – 当你滚动时.所以,你会向下滚动,但页面不会下降.相反,下一个div将覆盖第一个,依此类推等等.不知道怎么做?这是我有的:

UPDATE

.container {
    width:100%;
    height:100%;
    position:relative;

}

.container1 {
    display:block;
    position:fixed;
    margin-top:690px;
    width:100%;
    height:500px;
    z-index:1;
    background:#333;


  }

.container2 {
    display:block;
    position:absolute;
    margin-top:1190px;
    width:100%;
    height:500px;
    z-index:2;
    background:#F00;
}

<div class="container">

<div class="container1">
info
</div>

<div class="container2">
info
</div>
</div>

此调整正常,但底部div(container1)不是500px,而是设置为屏幕大小.我确信这是对代码的简单调整,但我很难过.

谢谢你的帮助!

解决方法

这是一个概念证明,虽然有效,但确实需要跨浏览器进行测试(但我相信它可以在任何地方使用)并且稍微改进.

我们的想法是使用JavaScript来监视窗口的滚动位置并相应地修复相应的内容面板,从而在滚动查看时给出新内容与其重叠的错觉.

http://jsfiddle.net/amustill/wQQEM/

猜你在找的CSS相关文章