Javascript 如何使用css使内容垂直堆叠

也许有人知道这个游戏

我想把每一张牌都叠成一列，这是我的小提琴

在我的例子中，我有一张卡，用最大高度的

div

包装，如果卡超出范围，卡不会折叠（隐藏），但应该堆叠在顶部

这在我的代码中发生

我想这样做，每一张牌都叠好了

HTML

<div class="wrapper">
  <div class="card card-1">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-2">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-3">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
</div>

---

那么，我应该怎么做才能实现呢？

您是否尝试过使用

z-index

属性？它用于指定元素的堆栈顺序

例如：

.wrapper{
显示器：flex；
弯曲方向：立柱；
最大高度：75vh；
溢出：隐藏；
}
.卡片{
填充：0.4em 1rem；
宽度：250px；
边界半径：5px；
保证金：0.5雷姆；
}
.卡片{
背景：鲑鱼；
边框：2倍纯红；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：-3；
}
.card.card-2{
背景：皇家蓝；
边框：2件纯蓝；
位置：绝对位置；
左：0px；
顶部：15px；
z指数：-2；
}
.卡片{
背景：绿黄色；
边界：2倍固体石灰；
位置：绝对位置；
左：0px；
顶部：30px；
z指数：-1；
}

乱数假文

Lorem ipsum dolor sit amet，奉献精英。所有的法律都是合理的，真正的法律都是合理的，

乱数假文

Lorem ipsum dolor sit amet，奉献精英。所有的法律都是合理的，真正的法律都是合理的，

乱数假文

Lorem ipsum dolor sit amet，奉献精英。所有的法律都是合理的，真正的法律都是合理的，

我不知道您想用它实现什么，因为上面卡片中的文本将变得不可读，但一种方法是：

var-topProperty=0；
var增量=20；
$（'.card'）。每个（功能（i，obj）{
$（this.css（'top'，topProperty）；
topProperty=topProperty+递增方式；
});
#框{
位置：相对位置；
}
.卡片{
位置：绝对位置；
宽度：200px；
高度：100px；
}
.橙色{
背景颜色：橙色；
}
紫色{
背景颜色：紫色；
}
黄先生{
背景颜色：黄色；
}
格林先生{
背景颜色：绿色；
}

A.
B
C
D
我真的很想帮忙，但我不能，因为您没有提供代码。如果没有看到你的代码，我或其他任何人都无法帮助你。编辑您的问题并添加一个代码段。感谢这确实有效，但是如果它显示的数据是动态的，在css中，您可以在每个卡示例中设置范围
top:10px；顶部：20px；前30名在每个卡类中。但我们不知道显示了多少卡，所以有没有办法静态地增加距离？
.wrapper{
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}
.card{
  padding: 0.4em 1rem;
  width: 250px;
  border-radius: 5px;
  margin: 0.5rem;
}
.card.card-1{
  background: salmon;
  border: 2px solid red;
}
.card.card-2{
  background: royalblue;
  border: 2px solid blue;
}
.card.card-3{
  background: greenyellow;
  border: 2px solid limegreen;
}