如何定位重疊的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); 
}