我正在创建一个页面,当访问者向下滚动页面时,英雄图像必须保持在屏幕中央。可滚动的元素将在滚动经过时“框住”英雄图像。
但是,我的初始屏幕(首屏)必须有 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;
}
感谢任何帮助!!
最佳答案
您可以通过以下步骤实现:
- 将容器(即主页)的
位置
设置为relative
。 - 将英雄的
位置
设置为固定
,这样它就不会随容器滚动。 - 将帧的
位置
设置为绝对
,z-index
高于英雄,这样它就可以覆盖它。
你可以看下面的例子。我设置了容器背景颜色以便我们可以看到它,并将其高度设置为 1000px
以便我们可以测试它的滚动,因此这些设置仅用于演示目的。
要使英雄和框架居中,您需要执行以下步骤:
- 将左右边距设置为
自动
。 - 设置固定宽度。这是自动边距工作所必需的。
- 将
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>
关于css - 覆盖 2 个 DIV,其中一个是静态的,另一个是可滚动的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43679191/