使用相对定位在文本上覆盖文本

Question

我想定位覆盖图像的文本.以下是我目前使用的代码:

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

我的问题是,虽然文本被正确覆盖,但它所消耗的"空间" <td>仍然存在!当我试图替换<div>'margin-top'中的'top'位置时,它也会影响the <img>,因此它<img>会越过边界<td>.

请帮我!

谢谢!

Answer 1

你想要position: absolute和容器是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>