How to stack the divs using relative positioning? - html

Question

I positioned divs relative and stacked them one below the other with fixed height. Next i am moving a div 20px up like top:-20px. the problem is for all the following divs i have to do top:-20, otherwise there is a gap of 20px. Is there a work around for this.
I have added a 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;}
here you can see there is a gap between 3rd div and fourth div. to correct it i have to position all the following divs. is there a work around

Answer 1

I think this jsfiddle answers the question. You need to add a wrapper that groups the divs you want to shift upward.
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;
}