CSS定位：相關位置由負利潤率確定

Question

如何使箱重疊和偏移頂部和左側5px的一個個只使用CSS

plz check the result what i want first

PLZ檢查上部連桿

我認爲它可以在一個樣式定義完成，不需要定義每個盒子的位置

你能幫我調整this code嗎？

HTML

<div class="holder"> 
    <div class="card" ></div> 
    <div class="card" ></div> 
    <div class="card" ></div> 
    <div class="card" ></div> 
</div> 

CSS

.holder{ 
position:absolute; 
top:100px; 
left:100px; 
display:block; 
font-size: 0; 
} 
.card{ 
position:relative; 
background:red; 
opacity: 0.4; 
width:40px; 
height:60px; 
margin-top:-55px; 
margin-left:-35px; 
} 

感謝üVV多

Answer 1

如何minimalising標記和使用箱陰影呢？

這可以讓你只申報單卡元素，並使用多個盒子陰影：

.holder{ 
 
position:absolute; 
 
top:100px; 
 
left:100px; 
 
display:block; 
 
font-size: 0; 
 
} 
 
.card{ 
 
position:relative; 
 
background:red; 
 
opacity: 0.4; 
 
width:40px; 
 
height:60px; 
 
margin-top:-55px; 
 
margin-left:-35px; 
 
    box-shadow: 5px 5px rgba(255,0,0,0.4),10px 10px rgba(255,0,0,0.4), 15px 15px rgba(255,0,0,0.4), 20px 20px rgba(255,0,0,0.4); 
 
}

<div class="holder"> 
 
    <div class="card" ></div> 
 
</div>