Css 覆盖2个div，其中一个是静态的，另一个是可滚动的

我正在创建一个页面，当访问者向下滚动页面时，英雄形象必须保持在屏幕中央。可滚动的元素将在滚动经过时“框定”英雄图像

然而，我的初始屏幕（折叠上方）必须有英雄图像和第一帧图像，重叠，并且无论我如何混合位置：粘性与固定、绝对、静态。。。什么都不起作用，帧显示在英雄下方（即div不会重叠/覆盖）

另外，我希望在英雄前面有一个框架层，但是z索引似乎没有什么区别

以下是我的布局：

<div class="homepage">
    <div class="hero-image">
        <img src="images/hero-can.png">
    </div>
    <div class="homeScreen1">
        <img src="images/water-splash.png">
    </div>
 </div>

---

谢谢你的帮助

您可以通过以下步骤实现：

将容器（即主页）的

位置设置为
relative

将英雄的

位置设置为
fixed
，这样它就不会随容器滚动

将帧的

位置

设置为

绝对

，且

z-index

高于英雄，以便可以覆盖它

您可以看到下面的示例。我设置了容器的背景颜色，这样我们可以看到它，并将其高度设置为

1000px

，这样我们可以测试它的滚动，所以这些设置仅用于演示目的

要使英雄和画面居中，您需要以下步骤：

将左右边距设置为

auto

设置一个固定的宽度。这是自动页边距工作所必需的

将

左侧

和

右侧

设置为零。这是将

fixed

和

absolute

布局居中所必需的

。主页{
背景色：#0ff；
高度：1000px；
位置：相对位置；
}
.英雄形象{
位置：固定；
宽度：150px；
保证金：0自动；
左：0；
右：0；
}
.家庭主义1{
位置：绝对位置；
宽度：160px；
保证金：0自动；
顶部：200px；
左：0；
右：0；
z指数：1；
}

---

是的，这适用于我的布局代码，谢谢。我的问题是让最初的覆盖层工作-我可以让框架scoll'过去'的英雄，因为我想它，但我只是不能让它启动ovarlaid。谢谢，工作很好：）

.homepage {
    background-image: url('images/background.jpg');
}

.hero-image {
    margin: 0 auto;
    max-width: 512px;
    position: sticky;
    top: 0;
    z-index: 99999;
}

.homeScreen1 {
    margin: 0 auto;
    width: 1024px;
    text-align: center;
    z-index: 999999;
}