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

Question

我将 div 相对放置，并以固定高度将它们一个放在另一个下面。接下来我将一个 div 向上移动 20px，如 top:-20px。问题是对于以下所有我必须做的div:-20，否则会有20px的差距。有解决办法吗？

我添加了一个 fiddle 。 http://jsfiddle.net/xS3Kt/

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;
}