使第二个div (以及随后的所有div )显示在绝对div下

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

因此，现在标题正确地覆盖在英雄图像上，但现在段落已经上移，并且也在英雄图像上。既然我已经在英雄形象上做了position:absolute，并将其锚定在顶部，我如何将段落(和所有后续div)向下移动？

Answer 1

在.header上使用position: absolute；，而不是在.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;
}