html - 当其他 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秒如您所见，我尝试使用 position: relative但它没有达到我的目标。

对不起，如果我解释得更好，我很难用英语解释它。

Answer 1

top 属性(如 left、right 和 bottom)仅用于定位绝对元素。< br/>将此属性赋予元素可能会赋予它绝对行为。
要定位相对元素，您应该使用 margin-top 代替。

HERE 是一个工作 fiddle