Question

我将div相对放置并将它们一个堆叠在另一个之下并保持固定高度。接下来我正在向上移动一个20px的div：-20px。问题是所有以下div我必须做到顶部：-20，否则有20px的差距。有没有解决这个问题。

HTML

<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>

CSS

div{
    hieght:50px;
    position:relative;
    width:100%;
}
.class1{background:#bbb;}
.class2{top:-5px;background:#999;}
.class3{background:#777;}
.class4{background:#555;}

在这里你可以看到第3 div和第4 div之间存在差距。为了纠正它，我必须定位以下所有div。

是否有解决方法？

Answer 1

我认为jsfiddle回答了这个问题。您需要添加一个包装器，用于对要向上移动的div进行分组。

Html：

<div class="wrapper">
    <div class="class1">hello</div>
    <div class="class2">hello</div>
    <div class="class3">hello</div>
    <div class="class4">hello</div>
</div>
<div>hello</div>

的CSS：

div {
    border: .1em solid rgb(0,0,0);
    height:50px;
    position:relative;
    width:100%;
}
.wrapper {
    height : auto;
    margin-bottom: -5px;
    top:-5px;
}
.class1 {
    background:#bbb;
}
.class2 {
    background:#999;
}
.class3 {
    background:#777;
}
.class4 {
    background:#555;
}

如何使用相对定位堆叠div？

1 个答案: