make div изменение положение когда другой div.

Question

Я пытаюсь понять css позиций. То, что я пытаюсь выполнить, это: я хочу, чтобы, когда я установил div, после него изменилось положение div, измените положение первого div, перемещаясь, не перекрывая их. Давайте сделаем пример:

HTML

<div class="wrap"> 
    <div class="box1"> 
    </div> 
    <div class="box2"> 
    </div> 
    <div class="box3"> 
    </div> 
</div> 

CSS

.wrap{ 
    position: absolute; 
    background-color:yellow; 
    width:500px; 
    height:600px; 
    margin:0 auto; 
} 

.box1,.box2,.box3{ 
    position: relative; 
    width:450px; 
    height:150px; 
    margin:0 auto; 
} 
.box1{background-color:red; top: 100px;} 
.box2{background-color:green;} 
.box3{background-color:blue;} 

Теперь, когда я установил, например, top:100px на box1, он идет 100px от вершины, но box2 и box3 все еще остается. Я хочу, чтобы, когда я установил top на одном из div, они «пострадали» от изменения заданного положения, а не перекрываются или перекрываются другими div s Я попытался, как вы можете видеть, с position: relative, но этого не достигло моя цель.

Извините, если я объясню это лучше, мне сложно объяснить это на английском языке.

Answer 1

top свойства (как left, right и bottom) используются для позиционирования только абсолютные элементов.
, придающий этому свойству элемент, вероятно, дает ему абсолютное поведение.
, чтобы позиционировать относительный элемент, вы должны использовать вместо этого margin-top.

HERE является рабочей скрипкой

Answer 2

Используйте верхний край вместо верха. Верхняя/нижняя/левая/правая изменяет положение, из которого оно обычно было, и, следовательно, оно не влияет на остальных. Поля будут влиять и на остальных.

http://jsfiddle.net/eux4C/3/

.box1{background-color:red; margin-top: 100px;} 

Answer 3

Это звучит, как вы действительно хотите сохранить модель стандартной коробки, а не игнорировать его.

Не устанавливайте положение: относительное и используйте прокладку -top или margin-top, чтобы добавить дополнительное пространство.

Answer 4

Свойство css top может использоваться только для элементов с положением absolute (как говорилось в чате :-).

Для относительного позиционированного элемента, который вы должны использовать margin-top свойства, как:

.box1 {background-color:red; margin-top: 100px;} 

Вот это рабочая скрипку: http://jsfiddle.net/IrvinDominin/eux4C/4/