Come posso mettere un div su un’immagine?

Sto cercando di mettere un div su un’immagine in modo che si comporti come una didascalia, direttamente sopra l’immagine.

A volte la didascalia è più lunga delle altre volte, quindi non posso impostare una margin-top specifica: -px perché a volte l’altezza della didascalia è più lunga.

Ho provato questo e lo sfondo del link (nero) non mostra, anche come ho appena detto, l’altezza della didascalia cambia così questo metodo è spazzatura:

<img src = "" style="float:left;min-width:220px;max-width:220px;">

Prova qualcosa del genere:

 

Hai avuto alcune cose in corso:
1) Hai avuto un div all’interno di un tag ‘a’. Non dovresti inserire elementi a livello di blocco (come div) all’interno di elementi di livello inline (come a’s).
2) Rimuovi il galleggiante dall’immagine, imposta la posizione della tua div esterna sulla posizione relativa e quella del tuo div interno in assoluto, quindi posizionala assolutamente nella parte superiore del div contenente. Da lì, aggiungi uno z-index maggiore di 0 al div interno per buona misura, per assicurarti che rimanga impilato sopra l’immagine.

Aggiungi position:absolute; left:0px;top:0px;z-index: 2; position:absolute; left:0px;top:0px;z-index: 2; al div attuale e aggiungi style="position:relative;" nel genitore div

 

Usa la proprietà z-index CSS per allineare il testo sopra l’immagine. L’elemento con indice z più alto appare in alto.

Questo codice dovrebbe funzionare per quello che stai cercando di fare: