How to make links work with card-img-overlay in Bootstrap v4

Question

I have a problem where any Bootstrap v4 cards using map-img-overlay to display text above an image prevent links below this image from working.

These links work:

<div class="card" style="border-color: #333;"> <img class="card-img-top" src="..." alt="Title image"/> <div class="card-inverse"> <h1 class="text-stroke">Title</h1> </div> <div class="card-block"> <a href="#" class="card-link">Card link</a> <p class="card-text">Article Text</p> </div> <div class="card-footer"> <small class="text-muted">Date - Author</small> </div> </div> 

These links do NOT work:

 <div class="card" style="border-color: #333;"> <img class="card-img-top" src="..." alt="Title image"/> <div class="card-img-overlay card-inverse"> <h1 class="text-stroke">Title</h1> </div> <div class="card-block"> <a href="#" class="card-link">Card link</a> <p class="card-text">Article Text</p> </div> <div class="card-footer"> <small class="text-muted">Date - Author</small> </div> </div> 

I see that there is an open problem for bootstrap v4, but can anyone help with a workaround that will keep the same look?

Answer 1

The overlay position: absolute , which gives this element a z-index , and the rest of the content on the map is statically position ed, so none of them have a z-index . You can specify a z-index link by adding a non-static position , and since your link to the map appears after overlaying in HTML, the stacking order will place the stacking order of the map at the top of the overlay.

 .card-link { position: relative; } 

Answer 2

As mentioned by Michael Cocker, adding below to your css solves this problem.

 .card-link { position: relative; }