avoid superimposition of div in position:asbolute - css

Question

I have many div, which are in position:absolute.
I try to avoid their superimposition only with CSS rule. I don't want to change the top value.
.try {
/*some magic?*/
}
#pos1 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 30px;
}
#pos2 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 90px;
left: 30px;
}
#pos3 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 300px;
left: 30px;
}
#pos4 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 400px;
left: 30px;
}
#current {
position: absolute;
top: 5px;
left: 50px;
}
#expected {
position: absolute;
top: 200px;
left: 50px;
}
<h1 id="current">Current</h1>
<div id="pos1" class="try"></div>
<div id="pos2" class="try"></div>
<h1 id="expected">Expected</h1>
<div id="pos3"></div>
<div id="pos4"></div>
Here is also a jsfiddle :
ps: I supose this behavior it's stupid because I ask for position absolute.

Answer 1

Absolutely positioned elements are removed from the normal flow of the document. That means surrounding content ignore them and occupy their place:
9.6 Absolute positioning
In the absolute positioning model, a box [...] is removed from the
normal flow entirely (it has no impact on later siblings). [...] The
contents of an absolutely positioned element [...] may obscure the
contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
So either don't use absolutely positioning, or move your elements (e.g. with margins).