jquery - CSS:滚动时静止图像，但下方内容位于其上方

Question

现在这是用户滚动我的页面时发生的情况: 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
}

Answer 1

我认为您正在寻找一个固定位置的图像，而您想要“超越它”的内容是具有更高的相对位置z-index.

Example

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;
}