在跨客户端HTML电子邮件中使元素重叠？

Question

在普通的浏览器HTML中，使元素重叠很容易。

但是在HTML电子邮件的黑暗世界中，座右铭是“像1996年的代码”因为Outlook使用来自 MS Word 的渲染引擎而Gmail几乎删除了所有内容，每种方法都可以制作两个元素由于客户支持不佳，我能想到的重叠是不合适的：

许多客户端不支持
• Position ，因此没有position: absolute;或position: relative;也没有top，left， right ...
• 负边距会被Gmail和其他人删除。所以，没有负利润。
• 使用 overflow: visible; 元素的'overhang'，宽度和高度小于元素内容的大小时，{{1}时效果不佳}标签都需要明确的高度和宽度或布局，因为缺少<img>支持和大多数时间float by necessity need to be based on tables的不稳定处理。 （也就是说，如果有可能，基于此的东西似乎是最可能的选择）
• 没有涉及背景图片的内容，因为这些内容已在Gmail和其他内容中删除
• 甚至没想到尝试在HTML电子邮件中使用CSS3或javascript ......

是否有任何可以可靠地用于在跨客户端HTML电子邮件中创建元素之间重叠的内容？和/或任何使元素从其边界框伸出而不影响其邻居定位的方法？

例如，假设你想做这样的事情（虚线和背景显示边界框），大图像挂在下面的行而不是向下推...... < / p>

元素（在这种情况下，<div>，但不一定是图像）与其他元素重叠（在这种情况下，下面的行 - 但不一定是单独的行）而不将它们推开。

如果没有主要的客户端兼容性问题，有没有办法做到这一点？

编辑：刚刚找到this piece of crazy twisted genius：使用colspans和rowpans使表格单元格重叠。这可能是一个选项，但尚未对其跨客户端渲染进行全面测试，但欢迎来自以往经验或研究的任何信息。

---

假设我们正在制作一份新闻通讯，我们无法预测客户将使用哪些客户，因此我们必须支持流行的主流电子邮件客户端：Outlook，Gmail，Yahoo，Hotmail，Thunderbird，iOS / OSX，Android。 ..

Answer 1

天才的解决方案适用于大多数情况。但是对于outlook 2007,2010和2013年，它不会被删除。

Answer 2

谈话有点晚，但this similar answer是你正在寻找的技术。

您的示例要复杂得多，因为您跨越行和列。我正在接受挑战：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- This row is needed to enforce col widths in Outlook -->
    <td width="100">
    </td>
    <td width="300">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb">
      Title Here
    </td>
    <td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd">
      Image Here
    </td>
  </tr>
  <tr>
    <td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc">
      Column<br>...<br>...<br>...
    </td>
    <td width="300" valign="top" height="40" bgcolor="#aaaaaa">
      Heading 1
    </td>
  </tr>
  <tr>
    <td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee">
      Content<br>...<br>...<br>...
    </td>
  </tr>
</table>

这就像你得到的一样接近。你不能制作非矩形，所以身体的顶部标题必须在它自己的单元格中。