Say I have 2 divs with the same CSS class that are stacked on top of each other:

div {
  width:100px;
  height: 100px;
  background: red;
}

How do I make it so that when I click a button at the top of the page, a new div is created from off the screen at the bottom and moves upwards stopping where the 2nd div is.. When the button is clicked again, a 4th div moves in from the bottom of the screen and stops where the 3rd div is... etc creating a "stacked" divs effect?

I know about position:fixed and adjusting values for top, but I am not sure how to dynamically calculate where to stop the animation to achieve this effect.