使用相对定位将文本覆盖在图像上答案

【问题标题】：Text overlays over image using relative positioning使用相对定位将文本覆盖在图像上
【发布时间】：2019-09-10 14:28:54
【问题描述】：

我想放置一个覆盖图像的文本。以下是我目前使用的代码：

<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> 中消耗的“空间”仍然存在！当我尝试用“margin-top”替换<div> 中的“顶部”位置时，它也会影响<img>，因此<img> 越过了<td> 的边界。

【问题讨论】：

标签： html css image css-position overlay

【解决方案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>

【讨论】：

建议为多个样式属性创建一个 CSS 样式表。
这个答案是错误的，表格元素无法定位。某些浏览器（例如 Chrome）应用了它，但它不正确

【解决方案2】：

为什么不在 TD 内设置一个 div 将图像设置为 div 的背景并将文本拖放到 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>

【讨论】：

如果正在使用的图像被放大，这个答案就不那么通用了。
@EnocNRoll 对于响应式网站而言，这不是最佳选择。然而，在响应式设计中使用表格也不是最通用的选择，所以我想我会给出一个选项，因为两者都适用于 OP 的问题。还需要注意的是 z-index 样式是多余的，因为 z-index 仅适用于定位元素。