CSS堆栈卡

Question

我正在寻找一种使用CSS将卡片图像叠加在一起的方法：

我的代码：

<ul class="stack">
    <li class="card"><img src="4h.png"/></li>
    <li class="card"><img src="9c.png"/></li>
    <li class="card"><img src="5c.png"/></li>
</ul>

是否可以使用CSS制作它？

Answer 1

您可以使用边距或填充将卡片向左移动。

Here is an example codepen

HTML：

<div id="card1" class="card" />
<div id="card2" class="card" />
<div id="card3" class="card" />

CSS：

.card {
  min-height: 300px;
  width: 200px;
  padding-left: 40px;
}
#card1 {
  background-color: blue;
}
#card2 {
  background-color: red;
}
#card3 {
  background-color: green;
}

Answer 2

您可以使用CSS为您的卡absolute定位。对于HTML中的每张卡片，使用内联CSS在堆栈中指定left位置和z-index位置（例如，0表示底部卡片，1表示卡片上方的卡片，等等）。如果看到它们，请务必删除列表项目符号。

.stack {
    list-style-type: none;
}
.card {
    position: absolute;
}

<ul class="stack">
    <li class="card" style="left:25px;z-index:0;"><img src="4h.png"></li>
    <li class="card" style="left:50px;z-index:1;"><img src="9c.png"></li>
    <li class="card" style="left:75px;z-index:2;"><img src="5c.png"></li>
</ul>

注意：请注意，我没有对图片的引用，因此它们会显示为已损坏。