I am trying to create a layered effect with multiple divs, where each div is positioned slightly up and to the left of the previous one, giving the appearance of a stack of papers. I have experimented with absolute positioning and z-index, but I'm having trouble getting the positioning just right. You can view my attempts on this 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>