sibiling 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;
    }

在推动负顶部时，sil div“footer”将不会相应地向上移动。这是两个div之间的一个很大的空白区域

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

Answer 1

这是因为你使用位置相对。当你添加top-200px它向上移动<div>但没有留下他的空间时，你需要使用位置绝对或负边距（-ve）。

jsfiddle.net/zrsgb2rd /

Answer 2

提供margin-top:-200px代替top:-200px。因为它是相对元素。即使你通过给出负顶部来移动它也会占用空间。

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

<强> Working Fiddle

Answer 3

我希望你想要这个

＆＃13;

＆＃13;

.wrapper{
    position: relative;
}
.header { 
        background: green;
        
        height:620px;
        }
        .footer {
        background: blue;
        
        height:200px;
        }
        .featured {
    background: yellow;
    width: 500px;
    height: 420px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 200px;
}

＆＃13;

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

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

            </div>
            <div class="footer">

            </div>
</div>

＆＃13;

＆＃13;

＆＃13;