1

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>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
GetOffMyLawn
  • 1,362
  • 4
  • 14
  • 21

2 Answers2

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.

VoteyDisciple
  • 37,319
  • 5
  • 97
  • 97
1

I forked your JSFiddle... Is this what you are trying to achieve? https://jsfiddle.net/aewwq1np/

I positioned each one in the same spot then offset each one with margin-top and margin-left

I also used a some box shadow to add some depth. I use this to play with the box-shadow: http://www.cssmatic.com/box-shadow

e.g.

.second {
  bottom:10px;
  right:10px;
  margin-top: 20px;
  margin-left:4px;
  -webkit-box-shadow: -2px -12px 61px -9px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px -12px 61px -9px rgba(0,0,0,0.75);
  box-shadow: -2px -12px 61px -9px rgba(0,0,0,0.75);
}
Michi
  • 23
  • 3