Scalable way to stack in CSS

css3
html5

I hope everyone will have heard about Sticky Notes. I wanna stack stuff like that. So this is the approach I have till now. I am not sure how to make it scalable for any number of stickies, without using JavaScript.

* {
  font-family: 'Segoe UI';
}
.stickynote {
  position: absolute;
  background: #fc0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;
}
.stickynote + .stickynote {
  top: 20px;
  left: 20px;
}

.stickynote + .stickynote + .stickynote {
  top: 30px;
  left: 30px;
}

<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>

Problem:

I cannot keep on adding .stickynote + .stickynote + .stickynote for all.
Is the approach (HTML Structure) correct?
It is not a good idea to nest them, as they will not be semantically correct. If that was possible, I would have used nested <ul> and <li>, but I want all those stickies be siblings.
Every sticky note has varible heights and may be fixed width. Please don’t hardcode the height.