sibiling ДИВ не занимает пространство DIV с позиции относительной и с отрицательной верхней

Question

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

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

</div> 

    </div> 

устанавливаемыми сотовыми выглядеть следующим образом

.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» не будет двигаться соответственно. Это большое пустое пространство между двумя дивы

Это мой код 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>