时间戳

首页 > 解决方案 > 如何将纯 CSS 扑克牌样式的 div 放置在顶部的下方？

html - 如何将纯 CSS 扑克牌样式的 div 放置在顶部的下方？

问题描述

我正在尝试以扑克牌的方式将样式化的 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。至少，假设这可能有效。之前的测试无法使用绝对值将卡片保持在设置列内，所以我决定先让堆叠工作。

标签： htmlcss

解决方案

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

标记

推荐阅读