将 HTML TABLE 元素一个一个地堆叠

Question

我正在尝试创建一个简单的 HTML 电子邮件设计。在设计中，我想将多个元素堆叠在一起，具体来说，是一个

img

和一些文本。

使用

divs

和

img

标签这不会有问题，但使用表格感觉更笨重。我意识到桌子本质上并不是为了将桌子堆叠在一起

我想出了一种将文本放在

img

上的方法，但我的问题是，有比我更好的方法吗？

当各种电子邮件客户端呈现问题时，我是否只是为自己设置了问题？

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

https://jsfiddle.net/9o3bnmas/3/

Answer 1

有绝对更好的方法！

电子邮件客户端会对您的代码执行奇怪的操作，从他们接受或不接受的内容开始：查看 https://www.caniemail.com/features/css-z-index/ 和 https:// www.caniemail.com/features/css-position/ 我们发现这不适用于 Gmail（网络邮件、应用程序等）。

所以说真的，我应该重新措辞而不是双关语——有一种非常有效的方法。

有一种名为“假绝对”的 HTML 电子邮件技术，由 Mark Robbins https://www.goodemailcode.com/email-enhancements/faux-absolute-position.html 和 Steven Sayo https://sayo1337 开发.medium.com/overlay-email-absolute-positioning-efd2f2f09ed4