Comment afficher du texte sur une image autre qu'avec le css

Bonjour a tous
je confronte a un soucis

sur mon site j avais ajouter du texte sur mes images tout cela fonctionne parfaitement

Mais ce jour j'ai voulu ajouter un menu fixe de tel façon a ce que les images puissent passer sous al bannière

Mais je suis confronté a un soucis a cause de la class position relative de l image
mon image passe au dessus de ma bannière et pas en dessous

Voici l extrait de mon code

body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}
.position-relative {
    position: relative !important;
}

<div class="container" style="background-color:#87CEEB;">
<div class="navbar">
   <a href="#home">Home</a>
   <a href="#news">News</a>
   <a href="#contact">Contact</a>
</div>
<div class="main">
   <div class="position-relative product">
      <a href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" title="The Cleaner">
         <div class="overlay w-100 h-100 position-absolute justify-content-center">
            <p class="align-self-center">clic pour agrandir</p>
         </div>
         <img class="card-img-top" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" alt="perle en verre pour la pêche à la perle" width="100%" />
      </a>
   </div>
</div>

et donc voici ce qui ce passe avec ce code



et voici ce que je souhaite avec un texte sur l image