CSS定位：通过负边距定义相关位置答案

【问题标题】：CSS Positioning: relate position define by negative marginCSS定位：通过负边距定义相关位置
【发布时间】：2015-04-10 20:23:42
【问题描述】：

如何使框重叠并偏移顶部和左侧5px仅使用css

plz check the result what i want first

请查看上面的链接

我认为可以只定义一种样式，无需定义每个框的位置

你能帮我调整一下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;
}

非常感谢你

【问题讨论】：

标签： css css-position margin

【解决方案1】：

如何尽量减少标记并改用盒子阴影？

这允许你只声明一个卡片元素，并使用多个盒子阴影：

.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>

【讨论】：