Estoy intentando poner un botón en una imagen. He intentado hacer z-index y todo, pero parece que no funciona.

 <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 feb. 2021 a las 22:33

3 respuestas

La mejor respuesta

Necesita especificar la posición de su elemento posicionado absoluto, por ejemplo, podría especificar left: 0px. Tenga en cuenta que he cambiado la URL de la imagen para hacer una demostración funcional, debe cambiarla en su propio código.

 <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 mar. 2021 a las 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 feb. 2021 a las 19:39

Puede hacer esto muy fácilmente configurando la imagen como fondo del div principal y luego centrando el botón.

  <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 mar. 2021 a las 23:02