Question

我目前有：

<div className='header'></div>
<div className='hero-img'></div>
<div className='paragraph'></div>
<div className='cta'></div>

我想将标题叠加到英雄图片上。这是我的CSS：

.hero-image {
height: 60vh;
min-height: 10em;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
}

所以现在标题正确地覆盖在英雄图像上，但现在该段落向上移动并且也在英雄图像上方。现在我已经完成了位置：英雄形象上的绝对位置并将其固定在顶部，如何将段落（以及所有后续的div）向下移动？

Answer 1

使用position：absolute; .header不在.hero-img，它会正常工作。

Answer 2

而不是使image位置absolute成为header的位置absolute。在申请之前学习positions，你会做随机的事情并得到随机的结果。

.image{
  display: block;
  width: 200px;
  height: 200px;
  background-color:red;
}
h2{
  position: absolute;
}

<div>
  <h2>Good
  </h2>
  <div class='image'></div>
</div>
<p>Para1 Para1 Para1 Para1 Para1 Para1 Para1 Para1</p>

此处只有header将从正常布局中删除，并且将位于左上方的父div上。其他一切将保持平常流动。

在绝对位置，只需想象header不存在，然后将header置于其父级的左上角。

Answer 3

您可以在此处使用HTML5文档部分元素。

（你真的应使用<header>代替<div class="header"> ...）

<header>
</header>

<main>
<div className='paragraph'></div>
<div className='cta'></div>
</main>

不要忘记给<header>背景图片：

header {
background-image: url(/hero-img.jpg);
}

如果<header>高140px，您可以给它绝对定位：

header {
position: absolute;
top: 0;
left: 0;
}

您可以<main> margin-top：

main {
margin-top: 160px;
}

使第二个div（以及所有要跟随的div）出现在绝对div下

3 个答案: