Css - add top property to each div, with top property multiply? - css

Question

I have 10 div, and every one of them has position absolute, width: 100px and height 100px. In this case, we will see only one div, as rest of div overlaps each other.
So i wanted to ask, if i can in pure CSS, select those div, and add every one, top property which should look like:
fist div : top:0
second div: top:100px
third div: top:200px
And so on...
I tried with for example with this formula, but without success:
:nth-child(n+x);
Thanks.

Answer 1

Yes you can do that..
e.g.
<div id="wrapper">
<div class="first-div">
<div class="second-div">
</div>
<style type="text/css">
/* for first div */
#wrapper > div:nth-child(1) {
top: 0px;
}
</style>
using jQuery, you can set top dynamically.
e.g.
jQuery('#wrapper > div').each(function(index){
jQuery(this).css('top', index * 100);
});

Answer 2

If you want to use Alpesh Panchal approach and still have variable height divs, you can just store the total height in a variable:
http://jsfiddle.net/4u9jLm95/2/
HTML:
<div id="wrapper">
<div class="first"> </div>
<div class="second"> </div>
<div class="third"> </div>
<div class="fourth"> </div>
</div>
CSS:
#wrapper div {
background-color: teal;
width: 100px;
position: absolute;
}
.first {
height: 100px;
}
.second {
height: 200px;
}
.third {
height: 50px;
}
.fourth {
height: 150px;
}
JS:
var total = 0;
$('#wrapper > div').each(function(index){
$(this).css('top', total);
total += $(this).height() + 100;
});
However, as others said, using position: absolute might not be the best option here.