如何防止来自不同 table 的文本出现在图片 html 电子邮件代码中

Question

所以我首先将图片放在 table 中以绝对定位，使其上方出现文字，但我现在遇到的问题是下方的 table 文字也出现在图片上。我该如何防止这种情况发生？

<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <img src="img/suit1.jpeg" width="590px;" height="500px;" style="position:absolute">
          <h1>each</h1>
          <button>SHOP Now</button>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <h1>hello</h1>
        </td>
      </tr>
    </table>
  </td>
</tr>

Answer 1

请尝试将 position: absolute 应用于文本元素。在我的解决方案中，我将文本包装在 div 中并应用 position: absolute 属性。此外，我已将 position: relative 应用于图像和文本的 parent element。

<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td style="position:relative;">
          <img src="img/suit1.jpeg" width="590px;" height="500px;">
          <div style="position:absolute; top: 0; left: 10px;">
            <h1>each</h1>
            <button>SHOP Now</button>
          </div>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <h1>hello</h1>
        </td>
      </tr>
    </table>
  </td>
</tr>

如何防止来自不同 table 的文本出现在图片 html 电子邮件代码中

How do I prevent text from different table from appearing on a picture html email code

html

email

debugging

html-email