Place H2 and button over CSS image

Question

I am developing a web application and would like to put the title <h2> and a button on an image but when placing the title and button the image misaligns down.

Link to my application

Answer 1

Create a class and place the text and button inside it to separate them from the image:

<span class="bot_comprar">
   <h2>Bolos até R$30,00</h2>
   <button type="button" class="comprar_botao">Comprar</button>
</span>

In CSS, add:

*{
   position: relative;
}

.bot_comprar{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9;
}