在div中添加margin到h3會移動整個div？

以下是我需要的：一個格sec-3（橙色）與其他格（白色）重疊。我通過給sec-3 a margin-top: -12%這樣做。（這是我想要的）。然而，橙色div中的h3太接近圖像。在div中添加margin到h3會移動整個div？

的問題：h3，有點靠近/後面的圖像被給予在sec-3margin-top: 5%; BUT移動整個DIV而不是移動h3下來的。

當前：sec-3中的h3在sec-2的圖像後面。

.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>

來源

2017-06-29 Shaz

這不是好主意！然後創建3節。用margin-top轉換圖像。

但對於解決您的問題，你可以給填充到.SEC-3-頭條

來源

2017-06-29 11:02:14 Abolix

你可以使用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>

來源

2017-06-29 11:07:35 sol

在div中添加margin到h3會移動整個div？

回答

相關問題