How to overlap a large number of divs with position relative

Question

Presuming I have a div container with position: absolute, that has 20 div children, all with position: relative (same size, colored 100px X 100px boxes). The question is how to display all child-divs overlapping each other (each on top of the other, like a deck of cards)?

There are a few questions regarding this but I need to understand the principle that can apply to any number of divs (am not totally clear on negative margins), ideally something where I do not need to recalculate the positioning for each child-div if any/all sizes change.

Answer 1

As the other two comments have said, i would position: relative; your parent div. Then position: absolute; all your cards. Position absolute takes the element out of the "normal flow" of the website to then allow you to position the cards over each other. You could overlap them with position: relative; however it would mean that each card would need its own individual styling to make sure its positioned over the other which would be a lot of work. see here for more info on position attribute http://www.w3schools.com/css/css_positioning.asp