J'essaye de mettre un bouton sur une image. J'ai essayé de faire z-index et tout, mais cela ne semble pas fonctionner.

 <div class="landing-img">
      <img src="CartoonPalace.png" class="img-fluid" style="position:relative; z-index: -1;"  alt="">
      <a href="" class="btn btn-outline-primary" style="position: absolute; z-index: 1000;">Start Exploring</a>
  </div>

1
Flamiooo 25 févr. 2021 à 22:33

3 réponses

Meilleure réponse

Vous devez spécifier la position de votre élément positionné absolu, par exemple, vous pouvez spécifier left: 0px. Notez que j'ai changé l'url de l'image afin de faire une démo fonctionnelle, vous devez la changer dans votre propre code.

 <div class="landing-img" style="position:relative;">
      <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
      <a href="" class="btn btn-outline-primary" style="position: absolute; left: 0px;">Start Exploring</a>
  </div>
2
Alba Herrerías 3 mars 2021 à 21:53
<a href="" class="btn btn-outline-primary" style="position: absolutee; left: 10px; bottom: 10px; z-index: 2;">Start Exploringg</a>
0
Paresh Kamble 25 févr. 2021 à 19:39

Vous pouvez le faire très facilement en définissant l'image comme arrière-plan du div parent, puis en centrant le bouton.

  <div class="landing-img">
      <a href="" class="btn btn-outline-primary">Start Exploring</a>
  </div>

    // css
    .landing-img{
        background-image: url(CartoonPalace.png)
        display:flex;
        justify-content: center;
        align-items: center;
    }
0
Sean Reilly 3 mars 2021 à 23:02