How can I position overlapping divs to look like a stack of papers?

Question

I want to layer multiple divs, such that each successive one is offset up and to the left of the one in front of it. It should roughly look like a stack of papers. I've tried playing around with absolute positioning and z-index, but the positioning doesn't seem to play nicely. Here's a Fiddle

.box{
  width:100px;
  height:100px;
  border-style:solid;
  border-color: #D3D3D3;
  position:absolute;
}

.first{
  background-color:yellow;
  z-index:10;
  bottom:0;
  right:0;
}

.second{
  background-color:blue;
  z-index:9;
  bottom:10;
  right:10;
}

.third{
  background-color:red;
  z-index:8;
  bottom:20;
  right:20;
}

.background{
  height:100%;
  background-color:green;
  position:relative;
  z-index:0;
}

.container{
  border-style:solid;
  border-color:black;
  width:300px;
  height:300px;
  position:relative  
}

<div class="background">
  <div class="container">
    <div class="box first"></div>
    <div class="box second"></div>
    <div class="box third"></div>
  </div>
</div>

Answer 1

Positions in CSS have to be given with a unit. You cannot say bottom: 10; — you have to say bottom: 10px;

Put the px in and it works fine.