Question

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

然而，我的初始屏幕（首屏）必须有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

您可以通过以下步骤实现这一目标：

将容器的position（即主页）设置为relative。
将英雄的position设置为fixed，因此不会随容器滚动。
将position的帧设置为absolute，其中z-index高于英雄，以便覆盖它。

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

要使你的英雄和框架居中，你需要以下步骤：

将左右边距设置为auto。
设定固定宽度。这是自动边距起作用所必需的。
将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>

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

1 个答案: