css - 覆盖 2 个 DIV，其中一个是静态的，另一个是可滚动的

Question

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

但是，我的初始屏幕(首屏)必须有 Hero 图像和第一个 Frame 图像，覆盖，无论我如何混合 position: sticky 与 fixed、absolute、static ......什么都行不通, Frame 出现在 Hero 下方(即 div 不会重叠/覆盖)。

另外，我想要 Hero 前面的 Frame 层，但 z-index 似乎没有什么区别。

这是我的布局:

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

这是我的 CSS:

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

感谢任何帮助!!

Answer 1

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

1. 将容器(即主页)的位置设置为relative。
2. 将英雄的位置设置为固定，这样它就不会随容器滚动。
3. 将帧的位置设置为绝对，z-index高于英雄，这样它就可以覆盖它。

你可以看下面的例子。我设置了容器背景颜色以便我们可以看到它，并将其高度设置为 1000px 以便我们可以测试它的滚动，因此这些设置仅用于演示目的。

要使英雄和框架居中，您需要执行以下步骤:

1. 将左右边距设置为自动。
2. 设置固定宽度。这是自动边距工作所必需的。
3. 将left 和right 设置为零。这是居中的 fixed 和 absolute 布局所必需的。

.homepage {
    background-color: #0ff;
    height: 1000px;
    position: relative;
}

.hero-image {
    position: fixed;
    width: 150px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.homeScreen1 {
    position: absolute;
    width: 160px;
    margin: 0 auto;
    top: 200px;
    left: 0;
    right: 0;
    z-index: 1;
}

<div class="homepage">
    <div class="hero-image">
        <img src="http://placehold.it/150x150">
    </div>
    <div class="homeScreen1">
        <img src="http://placehold.it/160x160">
    </div>
 </div>