在定位具有相对定位的div时,有没有办法让下一个div“流动”到前一个div现在所在的位置?

时间:2013-07-05 00:55:38

标签: html css

作为一个任意的例子,如果我有两个div s,其间有图像,那么

<div class="section1">
        <h2>Stuff in section one</h2>
</div>
<img src="../img/logo.png" class='myimg'>
<div class="section1">
        <h2>Stuff in section two</h2>
</div>

<div class="section2">
    <div class="container"> 
        <h2 style="color:white">Stuff in section one</h2>
    </div>
</div>

并说我想将该图像显示为块,并将其向上调整20像素。

.myimg{
    position: relative;
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    bottom: 20px;
    margin-right: auto;
    margin-left: auto;
}

工作正常,但现在section2 div开始于的位置 - 比实际位置低20px。

有没有办法让下一个元素(在案例中为section2)“知道”之前出现的相对定位的元素,以便它从该元素实际结束的地方开始?

1 个答案:

答案 0 :(得分:2)

使用负上边距代替:

http://cssdeck.com/labs/n3tbf9ro

.myimg{
    display: block;
    margin-top: -20px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
}

或摆脱前一元素的下边距:

http://cssdeck.com/labs/lsnlxk8i

.section1 :last-child {
  margin-bottom: 0;
}