Superposición de texto sobre la imagen utilizando el posicionamiento relativo

Question

Quiero colocar un texto superponiendo una imagen. A continuación se muestra el código utilizado actualmente:

<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> 

Mi problema es que, aunque el texto se superpone correctamente, el "espacio" que consume en el <td> sigue ahí! Cuando traté de reemplazar la posición 'superior' en el <div> con 'margen superior', también afecta al <img> y entonces el <img> pasa el límite del <td>.

Por favor, ¡ayúdame!

Gracias!

Answer 1

¿Quieres position: absolute y el contenedor seas 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

Por qué no establecer un div dentro del TD ajustar la imagen para el fondo del div y la caída de su texto en el 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>