Stacking with position: relative

Question

I'm attempting to stack divs (styled to look like sticky-notes) so that part of the divs on the bottom hang out. I initially considered okay, I'll just style the top-most div as normally, and then only style the parts that you can see with the bottom divs (as opposed to making all divs the same width+height and stacking them). The issue is that I also want to style the border-radius of all divs the same, and if I do it the non-stacking way, then border-radius applied to the top div doesn't yield the same design as any border-radius applied to the bottom divs (because the width+height is different for the top div, I'm guessing).

<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>

1. Is there a way to fix the border-radius issue without resizing the divs to all be the same width+height?
2. If I were to resize the divs to all be the same width+height, how can I stack them? It seems that position:relative and z-index combination on the divs won't work because position:relative created a new container block, thus somehow making the z-index not work with the other divs' new container blocks.

Answer 1

If I were you, I'd:

1. add another class called stickynote and find all the common style (in this case border-radius) and apply the class to all of them

2. I'm not sure what you mean by stacking them -- when I read your initial paragraph, I thought you meant stack them vertically on the y axis, but seemingly, you're struggling with z-axis, so it seems like you want to stack them on the z axis. In which case, I'd put all three of them in a container, position that container relative, and position the three stickynote absolute, with different z-index, but identical x/y position.

Answer 2

Please do the following for better scalability:

1. Use a common class.
2. Close the </div> correctly.
3. Check the snippet.

Snippet

.stickynote {
  position: absolute;
  background: #0f0;
  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"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>