如何定位重叠的 div 使其看起来像一叠文件？

Question

我想对多个 div 进行分层，以便每个连续的 div 都向上和向左偏移到它前面的那个。它应该大致看起来像一叠文件。我尝试过使用绝对定位和 z-index，但定位效果似乎不太好。这是 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

CSS中的位置必须带有单位。你不能说 bottom: 10;——你必须说 bottom: 10px;

把px放进去就可以了。

Answer 2

我分叉了你的 JSFiddle...这是你想要达到的目标吗？ https://jsfiddle.net/aewwq1np/

我将每一个都放在同一个位置，然后用 margin-top 和 margin-left

偏移每个

我还使用了一些框阴影来增加一些深度。我用它来玩盒子阴影：http://www.cssmatic.com/box-shadow

例如

.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);
}

如何定位重叠的 div 使其看起来像一叠文件？

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

html

css

position

z-index

absolute