在div中添加margin到h3会移动整个div?
问题描述:
以下是我需要的:一个格sec-3
(橙色)与其他格(白色)重叠。我通过给sec-3 a margin-top: -12%
这样做。 (这是我想要的)。然而,橙色div中的h3太接近图像。在div中添加margin到h3会移动整个div?
的问题:h3
,有点靠近/后面的图像被给予在sec-3
margin-top: 5%;
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>
答
这不是好主意! 然后创建3节。用margin-top转换图像。
但对于解决您的问题,你可以给填充到.SEC-3-头条
答
你可以使用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>