在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？

回答

相关问题