html - 如何将纯 CSS 卡片样式的 div 放置在顶部的下方？

Question

我正在尝试以扑克牌的方式将样式化的 div 放置在彼此之下，但目前我无法让它工作。

生成的效果如下所示:

但是，我希望其他卡片被顶部卡片隐藏 - 这些卡片最终可能会由循环生成。

这是我目前拥有的 HTML 和 CSS:

<div class="catCards">
  <div class="cwCard">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>

  <div class="cwCard cardUnder">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>

  <div class="cwCard cardUnder">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>      

</div>

-

.cwCard {
    margin: 0 auto;
    width: 160px;
    border: #FFF solid 1px;
    border-radius: 5px;
    background: #3d3d3d;
    overflow: hidden;
    box-shadow: 0px 4px 16px #000000cb;
    z-index: 5;
}

.cwCTitle {
    padding: 3px;
    border-bottom: 1px solid #FFF;
}

.cwImage {
    margin: 0 auto;
    width: 130px;
    height: 130px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

.cwValue {
    width: 100%;
    text-align: center;
    padding: 4px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.cardUnder {
    z-index: 2;
}

catCards 规则是空的，除了基本的页面布局之外没有其他 HTML。 cardUnder 规则主要用于测试变体。

编辑:如果可能，我想避免使用 position: absolute 并使用 Flex。至少，假设这可能有效。之前的测试无法使用绝对值将卡片保留在集合列中，所以我决定先让堆叠工作。

Answer 1

您没有将 div 定位在页面上，它们的行为应该遵循页面元素的流动，您需要将 div 的位置设置为相同，然后使用 z-index 将最上面的放在顶。

标记