Позициониране на CSS: отнася се до позицията, определена от отрицателния марж - css, css-position, margin

как да направите кутиите да се припокриват и да се компенсират отгоре и отляво 5px един по един само с css

PLZ проверка на резултата това, което искам първо

plz проверете горната връзка

Мислех, че може да бъде направено само в един стил, без да е необходимо да се дефинира местоположението на всяка кутия

може и да ми помогне да го коригирам този код?

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;
}

благодаря u vv много

Отговори:

Какво ще кажете за минимизиране на маркирането и използване на кутия сянка вместо?

това ви позволява да декларирате само един елемент от картата и да използвате няколко сенки от кутията:

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