如何制作如下所示的感应卡？

Question

我那个带日期的黑匣子有问题。我做到了，但是没有反应。

.date
{
  width: 20%;
  height: 15%;
  background-color: black;
  z-index: 1;
  position: absolute;
  top: 45%;
  left: 8%;
}

<div class="card up" style="width:400px height:400px">
    <img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
    <div class="date">
      
    </div>
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    </div>

Answer 1

让我们首先了解此案的问题。在图像上添加宽度：100％时，它具有响应高度。因此，.card没有固定高度。当您使用top: 40%（百分比值）时，这会破坏视图。

解决方案； 将图片和.date包装在另一个div中。

<div style="position: relative;">
   <img class="card-img-top" src="https://placehold.it/1900x1400" style="width: 100%;" alt="Card image">
   <div class="date"></div>
</div>

然后，为bottom: - 20%类设置top: 40%或适当的值而不是.date。 希望这能解决问题。

Answer 2

首先，您必须重新指定'card'和'up'类的宽度和高度（缺少半列）。

然后使用实际的代码片段，我无法清楚地知道出了什么问题，但是如果您对绝对定位有响应问题，请尝试在容器中添加“ position：relative”，这样绝对元素就不会溢出其父代

Answer 3

• 将position-absolute用于卡身
• 将日期放入卡体内，并为其赋予负的最高价值。

---

固定大小

.date {
  width: 50px;
  height: 50px;
  background-color: black;
  top: -25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6 mx-auto ">
      <div class="card up" style="width:400px height:400px">
        <img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
        <div class="card-body position-relative pt-5">
          <div class="date position-absolute"></div>
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
</div>

相对大小

.date {
  width: 3.8888888889em;
  height: 3.8888888889em;
  background-color: black;
  top: -1.9em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6 mx-auto ">
      <div class="card up" style="width:400px height:400px">
        <img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
        <div class="card-body position-relative pt-5">
          <div class="date position-absolute"></div>
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/gKzQez

https://css-tricks.com/almanac/properties/p/position/

---

您也可以使用负边距执行此操作。