html - 使用相对定位将文本覆盖在图像上

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'，它也会影响<img>所以 <img>越过 <td> 的边界.

Answer 1

您希望position: absolute 和container 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>