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

使用margin-top而不是top。顶部/底部/左/右从正常位置改变位置，因此不会影响其余部分。保证金也将影响其余部分。

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

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

Answer 2

top属性（left，right和bottom）仅用于定位绝对元素。
赋予元素这个属性可能会给它绝对的行为要定位相对元素，您应该使用margin-top。

HERE 是一个工作小提琴

Answer 3

css top属性只能用于位置为absolute的元素（如聊天中所述： - ）。

对于相对定位元素，您应该使用margin-top属性，如：

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

这是一个工作小提琴：http://jsfiddle.net/IrvinDominin/eux4C/4/

Answer 4

听起来你真的想要保留标准的盒子模型，而不是忽略它。

不要设置位置：相对，并使用填充 -top或margin-top以增加额外空间。

当其他div做的时候让div改变位置

4 个答案: