Is it possible to place absolut positioned elements automatically among themselves? - css

Question

Is it still possible to automatically place for examples div elements among themselves if they are positioned absolut?
In the code snippet there are three divelements which are placed among themselves. Is it somehow possible to delte the css style instructions for #elem2 and #elem3 and construct a general rule that the div elements should placed among themselves with an margin of e.g. 10px? So that I can easily add new div elements (variable height) with the css class column1 and don't have to worry about the margin-top respectively margin-bottom.
#containerGraph {
position: relative;
width: 700px;
height: 400px;
border: 1px solid black;
overflow:scroll;
}
/* set the position attribute for all div elements inside the mainContainer*/
#containerGraph > div {
position: absolute;
}
.paramElement {
width: 200px;
max-height: 90px;
border-radius: 18px;
text-align: center;
background-color: #e6e6e6;
color: #4d4d4d;
font-family: Verdana, Helvetica, sans-serif;
padding-bottom:5px;
font-size: small;
}
.column1{
margin-left:10px;
}
#elem2{
margin-top : 40px;
}
#elem3{
margin-top : 117px;
}
<div id="containerGraph" class="relative">
<div class="paramElement column1" id="elem1">
first
</div>
<div class="paramElement column1" id="elem2">
second with very large text text text text text text text text text text text text text
</div>
<div class="paramElement column1" id="elem3">
third
</div>
</div>

Answer 1

This is a strange need, and I don't see how to solve it the way the problem is posed.
However it seems that, if an absolute position is needed, it should be relevant (and so useful) only against the containerGraph, but clearly not for each one among others.
So a solution might be to:
insert a child <div> of your containerGraph, with an absolute position
it will contain the (formerly absolute) other <div>s
You can see it working in this snippet:
$('body').click(function() {
$('#elem2').remove();
$('#sub-container').append('<div class="paramElement column1" id="elem4">fourth</div>');
});
#containerGraph {
position: relative;
width: 700px;
height: 400px;
border: 1px solid black;
overflow:scroll;
}
/* set the position attribute for all div elements inside the mainContainer*/
#containerGraph > div {
position: absolute;
}
.paramElement {
width: 200px;
max-height: 90px;
border-radius: 18px;
text-align: center;
background-color: #e6e6e6;
color: #4d4d4d;
font-family: Verdana, Helvetica, sans-serif;
padding-bottom:5px;
font-size: small;
}
.column1{
margin-left:10px;
margin-bottom: 10px;
}
/*
#elem2{
margin-top : 40px;
}
#elem3{
margin-top : 117px;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click anywhere to change
<hr />
<div id="containerGraph" class="relative">
<div id="sub-container">
<div class="paramElement column1" id="elem1">
first
</div>
<div class="paramElement column1" id="elem2">
second with very large text text text text text text text text text text text text text
</div>
<div class="paramElement column1" id="elem3">
third
</div>
</div>
</div>