/ / Pozycjonowanie CSS: określ pozycję na podstawie marginesu ujemnego - css, pozycja css, margines

Pozycjonowanie CSS: określ pozycję na podstawie marginesu ujemnego - css, pozycja css, margines

jak sprawić, aby pola pokrywały się i przesuwać zarówno górny, jak i lewy 5px jeden po drugim, tylko używać css

plz sprawdź wynik, co chcę najpierw

plz sprawdź górny link

</ p>

Myślałem, że można to zrobić w jednym zdefiniowaniu stylu, nie ma potrzeby definiowania położenia każdej z nich

czy możesz mi pomóc dostosować to ten kod?

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

Dziękuję bardzo

Odpowiedzi:

0 dla odpowiedzi № 1

W jaki sposób zminimalizować znaczniki i zamiast tego użyć cienia pola?

to pozwala tylko zadeklarować pojedynczy element karty i użyć wielu cieni pudełkowych:

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