在div內的h3中增加邊距會移動整個div？

Question

這就是我需要的：一個div sec-3 （橙色）與另一個div sec-2 （白色）重疊。 為此，我給sec-3設置了margin-top: -12% 。 （這就是我想要的）。 但是，橙色div中的h3過於接近圖像。

問題：在圖像附近/后面的h3 margin-top: 5%; 在sec-3 BUT會移動整個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個部分。 使用margin-top變換圖像。

但是為了解決您的問題，您可以在.sec-3-headlines中添加填充

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>