Bootstrap：card-image-overlay 不在图像中

Question

抱歉这个问题，我讨厌 CSS。这对我来说毫无意义。

我正在尝试在图像顶部覆盖一些文本和一个按钮，但它从图像中出来；

这是整张卡片的代码；

<div class="col-md-6 col-lg-4 mb-4">
  <div class="card listing-preview">
    <h4 class="text-primary">{{ listing.title }}</h4>
    <div>
      <img class="card-img-top" src="{{ listing.map_url }}" alt="">
      <div class="card-img-overlay">
        <h2>
          <span class="badge badge-secondary text-white">£{{ listing.price|floatformat }}</span>
        </h2>
      </div>
    </div>
    <div class="card-body">
      <div class="listing-heading text-center">
        <p>
          <i class="fas fa-map-marker text-secondary"></i> {{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
      </div>
      <hr>
      <div class="row py-2 text-secondary">
        <div class="col-6">
          Bills Inc: &nbsp {% if listing.bills_inc %}
          <i class="fas fa-check"></i> {% else %}
          <i class="fas fa-times"></i> {% endif %}
        </div>
        <div class="col-6">
          Deposit: {% if listing.deposit %} £{{ listing.deposit|floatformat }} {% else %}
          <i class="fas fa-times"></i> {% endif %}
        </div>
      </div>
      <div class="row py-2 text-secondary">
        <div class="col-6">
          <i class="fas fa-bed"></i> Type: {{ listing.type|title }}</div>
        <div class="col-6">
          <i class="fas fa-bath"></i> Bathrooms: {{ listing.bathrooms }}</div>
      </div>
      <hr>
      <div class="row py-2 text-secondary">
        <div class="col-12">
          <i class="fas fa-user"></i> by {{ listing.advertiser_type }} {{ listing.advertiser_name|title }}</div>
      </div>
      <div class="row text-secondary pb-2">
        <div class="col-6">
          <i class="fas fa-clock"></i> {{ listing.list_date | timesince }}</div>
      </div>
      <hr>
      <a href="{% url 'listing' listing.id %}" class="btn btn-primary btn-block">More Info</a>
    </div>
  </div>
</div>

如果您也可以在地图底部覆盖“伦敦，N20”，则可以获得奖励积分（点赞）。

提前致谢。

Answer 1

您正在寻找z-index 属性：

#first {
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    z-index: 1;
}

#second {
    width: 60px;
    height: 60px;
    background-color: green;
    position: absolute;
    left: 30px;
    top: 30px;
}

<div id="first"></div>
<div id="second"></div>

z-index 较大的项目将显示在z-index 较小的项目之上。