在 div 内向 h3 添加边距会移动整个 div?

Question

这是我需要的：一个divsec-3(橙色)与另一个divsec-2重叠(白色)。我通过给 sec-3 一个margin-top: -12%来做到这一点。(这就是我想要的)。但是，橙色div中的h3与图像太近了。

问题：图像后面有点近/后面的h3在 Usec-3中margin-top: 5%;给出，但会移动整个div 而不是向下移动h3。

目前：sec-3中的h3落后于sec-2的图像。

这是我的样子：https://i.stack.imgur.com/k8318.jpg

.sec-2 {
text-align: center;
z-index: 11;
}
.sec-2 img {
margin-top: 0%; 
margin-left: 0;
margin-right: 0;
}
.sec-3 {
margin-top: -12%;
width: 100%;
background-color: orange;
text-align: center;
}
.sec-3 img {
margin-top: %;
}
.sec-3-headlines {
background-color: blue;
margin-top: 5%;
}

<div class="sec-2">
<h3>Say hi to Keeva.</h3>
<p class="sales-copy">World’s most smartest personal assistant in your procket.</p>
<!-- iphone 1 image -->
<img src="img/img-3.png" width="90%">
<!-- <div class="grey-box"> </div> -->
</div>
<div class="sec-3">
<!-- iphone image  -->
<div class="sales-copy-wrap">
<h3 class="sec-3-headlines">Get organized with events, tasks and notes.</h3>
</div>
<div class="image-wrapper">
<img src="img/img-1.png" width="50%" height="">
</div>
<div class="sales-copy-wrap" id="normalize-margin-copy">
<p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
</div>
</div>

Answer 1

这不是一个好主意！ 然后创建 3 个部分。使用边距顶部转换图像。

但是为了解决您的问题，您可以为 .sec-3 标题添加填充

Answer 2

您可以使用定位来放置h3

/* SECTION 2 */
.sec-2 {
text-align: center;
z-index: 11;
}
.sec-2 img {
margin-top: 0%;
margin-left: 0;
margin-right: 0;
}
/* SECTION 3 */
.sec-3 {
margin-top: -12%;
width: 100%;
background-color: orange;
text-align: center;
}
.sec-3 img {
margin-top: %;
}
.sec-3 .sales-copy-wrap {
position: relative;
}
.sec-3-headlines {
background-color: blue;
position: absolute;
width: 100%;
margin: 0;
top: 20px; /* adjust this value to lower the headline */
}

<div class="sec-2">
<h3>Say hi to Keeva.</h3>
<p class="sales-copy">World’s most smartest personal assistant in your procket.</p>
<!-- iphone 1 image -->
<img src="https://placehold.it/200x400" width="90%">
<!--            <div class="grey-box"> </div>
-->
</div>
<div class="sec-3">
<!-- iphone image  -->
<div class="sales-copy-wrap">
<h3 class="sec-3-headlines">Get organized with events, tasks and notes.</h3>
</div>
<div class="image-wrapper">
<img src="https://placehold.it/200x400" width="50%" height="">
</div>
<div class="sales-copy-wrap" id="normalize-margin-copy">
<p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
</div>
</div>