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

【问题标题】：How can I position overlapping divs to look like a stack of papers?如何定位重叠的 div 使其看起来像一堆文件？
【发布时间】：2016-06-25 18:06:31
【问题描述】：

我想将多个 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>

【问题讨论】：

标签： html css position z-index absolute

【解决方案1】：

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

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

我还使用了一些盒子阴影来增加一些深度。我用它来玩 box-shadow：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);
}

【讨论】：

VoteyDisciple 得到了我的目标，但也谢谢你！看起来不错

【解决方案2】：

CSS 中的位置必须用单位给出。你不能说bottom: 10;——你必须说bottom: 10px;

把px放进去就可以了。

【讨论】：