在h3中添加页边距会移动整个div吗？

Question

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

问题:在sec-3中，离图像有点近/在图像后面的h3被赋予了margin-top: 5%;，但它移动了整个div，而不是向下移动h3。

目前: sec-3中的h3位于sec-2图像的后面。

下面是我的样子：http://imgur.com/a/IeTw8

​

.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个部分。使用页边距-top转换图像。

但是为了解决你的问题，你可以给.sec-3-headlines填充

Answer 2

您可以使用positioning来放置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>

​