12

I want to position a text overlaying an image. Below is my currently used code:

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

My problem is, although the text is properly overlayed, the "space" it consumes in the <td> is still there! When I tried to replace the 'top' position in the <div> with 'margin-top', it also affects the <img> and so the <img> goes past the border of the <td>.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Water
  • 1,114
  • 1
  • 15
  • 31

2 Answers2

30

You want position: absolute and the container to be 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>
Community
  • 1
  • 1
Blender
  • 289,723
  • 53
  • 439
  • 496
2

Why not set a div inside the TD set the image to the background of the div and the drop your text in the 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>
CBRRacer
  • 4,649
  • 1
  • 23
  • 27
  • This answer is not so versatile if the image being used is being upscaled. – EnocNRoll - AnandaGopal Pardue Aug 11 '15 at 22:42
  • 1
    @EnocNRoll no for a responsive website this is not the best choice. However using a table in a responsive design would also not be the most versatile of choices so I figured I would give an option as both work for the OP's question. Also of note the style z-index is superfluous because z-index only works on positioned elements. – CBRRacer Aug 17 '15 at 12:41