现在这是用户滚动我的页面时发生的情况: https://www.youtube.com/watch?v=Mtuy1E5JPew
和here页面已上线。
如您所见,img#intro
(大黑白图像)“正常”滚动。我想改用这个 Action (2 张图片是结果):
如您所见,黑白图像保持静止,但下面的内容上升并覆盖它。
以下是元素的放置方式(简单方案):
<div id="container">
<img ... />
<img ... />
<img src="" id="intro" /> <--- THIS IS THE B/W IMAGE!
CONTENT BELOW
</div>
这是相关的 CSS:
#container {
position:relative;
width:1305px;
height:910px;
}
#intro {
margin-top:40px;
position:absolute;
z-index:1;
border-radius:8px
}
最佳答案
我认为您正在寻找一个固定
位置的图像,而您想要“超越它”的内容是具有更高的
.相对
位置z-index
HTML
<div class="container">
<div class="fixed-container">
<img src="http://placehold.it/1000x300" class="fixed"/>
</div>
<div class="overlay">
content goes here
</div>
</div>
CSS
.fixed-container {
height: 300px;
}
.fixed {
position:fixed;
}
.overlay {
position: relative;
z-index: 4;
background: red;
width: 1000px;
opacity: 1;
}
关于jquery - CSS:滚动时静止图像,但下方内容位于其上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30146033/