sibiling 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“footer”不会相应地上移。这是在两个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

Answer 2

这是因为你使用的相对位置。当你添加200px的顶部时，它会移动<div>但没有离开他的空间，你需要使用绝对位置或负位置（-ve）。

jsfiddle.net/zrsgb2rd/

Answer 3

我希望你想要这个

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

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

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

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

 
      </div> 
 
</div>