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>