css - sibling div 不占用位置相对且顶部为负的 div 的空间

Question

<div class="wrapper">
<div class="header">

</div>
<div class="featured">

</div>

  </div>

CSS 看起来像这样

    .header { 
    background: green;

    height:620px;
    }
    .footer {
    background: blue;

    height:200px;
    }
    .featured {
    background: yellow;
    width:500px;
    height:420px;
    margin:0 auto;
    position: relative;
    top: -200px;
    }

在插入负顶部时，silbing div“页脚”不会相应地向上移动。这是两个 div 之间的一大片空白区域

这是我的代码 http://codepen.io/adrianmak/pen/qZRqwy

Answer 1

给 margin-top:-200px 而不是 top:-200px。因为它是相对元素。即使您通过负顶部移动它也会占用空间。

.featured {
        background: yellow;
        width:500px;
        height:420px;
        margin:-200px auto 0;
        position: relative;
}

Working Fiddle