Sovrapposizione di testo sull'immagine utilizzando il posizionamento relativo

Question

Desidero posizionare un testo che sovrappone un'immagine. Qui di seguito è il mio codice attualmente utilizzato:

<td width="10%"> 
    <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> 
    <div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none"> 
     Test 
    </div> 
</td> 

Il mio problema è, anche se il testo è correttamente sovrapposto, lo "spazio" si consuma nel <td> è ancora lì! Quando ho provato a sostituire la posizione 'superiore' nel <div> con 'margin-top', ha effetto anche su <img> e quindi lo <img> supera il confine dello <td>.

Per favore aiutatemi!

Grazie!

Answer 1

Si desidera position: absolute e la contenitore di essere relative:

<td width="10%" style="position: relative;"> 
    <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> 
    <div style="position:absolute;left:0px;top:0px;font-size: 32px;display: none"> 
     Test 
    </div> 
</td> 

Answer 2

perché non impostare un div all'interno del TD impostare l'immagine di sfondo del div e il calo il testo nel div?

<td width="10%"> 
<div style="background: transparent url("tempballoon.png") no-repeat left top; font-size: 32px;width: 100%; height: height:[height of image]"> 
    Test 
</div> 
</td>