HTML邮件中用Table实现Img与文本堆叠的优化方案及兼容性问询

我正在设计一款简单的HTML邮件，需要实现文本叠加在<img>标签上方的元素堆叠效果。用<div>和<img>实现这个效果不难，但用<table>标签就很繁琐，我也清楚表格本身不是为元素堆叠设计的。我已经找到一种实现方法，想请教：

1. 是否存在更优的实现方式？
2. 该方案在不同邮件客户端中渲染是否会出现问题？

当前实现代码 #

<table style="width: 400px; height: 400px; background-color: red;">
  <tr>
    <td style="position: relative;">
      <img id="img_element" src="" style="position: relative; z-index: 1; width: 300px; height: 300px; background-color: yellow;">
      
      <div style="z-index: 2; position: relative; color: #000; left: 20px; top: -200px; font-size: 25px; ">
        Text goes here...
      </div>
    </td>
  </tr>
</table>

一、更优的实现方式 #

方案1：表格单元格背景图方案（首选） #

把图片设为<td>的背景图，直接在单元格内放置文本，完全依托表格原生布局，无需定位和负边距，是HTML邮件中最稳妥的图文叠加写法：

<table style="width: 400px; height: 400px; background-color: red;">
  <tr>
    <td style="width: 300px; height: 300px; background: yellow url('你的图片地址') no-repeat center center / cover; color: #000; font-size: 25px; padding-left: 20px; padding-top: 100px;">
      Text goes here...
    </td>
  </tr>
</table>

这种写法代码简洁，兼容性拉满，还避免了定位属性带来的各种隐患。

方案2：简化定位逻辑的写法 #

如果必须保留<img>标签，可以调整定位逻辑：

• 给<td>设置position: relative作为定位容器
• 文本容器改用position: absolute，直接通过top/left控制位置，替代原方案的负边距，更直观易维护：

<table style="width: 400px; height: 400px; background-color: red;">
  <tr>
    <td style="position: relative;">
      <img id="img_element" src="" style="width: 300px; height: 300px; background-color: yellow;">
      
      <div style="position: absolute; z-index: 2; color: #000; left: 20px; top: 100px; font-size: 25px;">
        Text goes here...
      </div>
    </td>
  </tr>
</table>

二、原方案的邮件客户端兼容性问题 #

原方案存在不少渲染风险，主要集中在这些客户端：

• Outlook桌面版（Windows）：用Word渲染引擎，对position: relative和z-index支持极差，定位元素大概率错位、隐藏，甚至导致整个布局崩溃。
• Gmail：会过滤表格内的部分position属性，可能让文本无法叠加到图片上方。
• 旧版移动邮件客户端：比如旧版iOS Mail、安卓自带邮件，负边距容易引发元素溢出或布局错乱。

对比之下，背景图方案几乎支持所有主流邮件客户端，是HTML邮件中图文叠加的最优解。

内容的提问来源于stack exchange，提问作者user1563944