Bootstrap: card-image-overlay is out of the image - html

Question

Sorry for this question, I hate CSS. It makes no sense to me.
I'm trying to overlay some text and a button on top of an image but it comes out of the image;
This is the code for the whole card;
<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>
More Info
</div>
</div>
</div>
Bonus points (upvote) if you can overlay 'London, N20' at the bottom of the map as well.
Thanks in advance.

Answer 1

You are looking for the z-index attribute:
#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>
The item having larger z-index will be displayed over the item having a lower z-index.