我正试图做一个效果,将一个div隐藏在其他类似页面后面:Canalla Agency。我使用了两个div和最后一个固定位置的div,这很有效,但div失去了高度。
很抱歉我的解释,但我不擅长CSS定位和Javascript。我希望你能帮助我,尽快见到你。谢谢
具有三个<div>
的解决方案:
唯一棘手的地方是"查看器"div创建滚动空间来查看背景div
不需要JS!
还记得在使用z-index
时指定position
。
<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>