HTML 电子邮件中的重叠表格/负顶部位置答案

【问题标题】：Overlapping tables / negative top position in HTML emailHTML 电子邮件中的重叠表格/负顶部位置
【发布时间】：2014-03-21 14:36:51
【问题描述】：

是否有替代 HTML 电子邮件中的负面定位的方法？下面第二个表格中的图像使用负定位向上定位100px。我需要该图像与上面的内容有些重叠。

<table>
    <tr>
        <td valign="top" width="400" style="padding-right:10px;">
            <p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem Impsum</p>
        </td>
       <td><img src="kneeler.jpg" /></td>
    </tr>
</table>

<table>
    <tr>
        <td style="position:relative; top:-100px;"><img src="shoes.jpg" /></td>
        <td valign="top" width="400" style="padding-left:10px;">
            <p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem ipsum</p>
        </td>
    </tr>
</table>

我尝试过padding-top: -100px;，但没有奏效。请帮忙！

【问题讨论】：

margin-top:-100px 在实际图像上而不是 td 上？
成功了！谢谢！但是负值在 HTML 电子邮件中有效吗？
我认为电子邮件客户端不允许负保证金值或任何保证金值 - Hotmail and Outlook.com Drop Support for Margin。
它没有用。我测试了电子邮件。谢谢@Ex-iT，我一直在使用该活动监控指南。
是的，对电子邮件客户端不太确定 - 我总是尽量让一切都尽可能简单 - 如果在简单的表格中不合适，我会告诉客户不！如果您只是想在图像上添加文本，最好只使用带有文本的图像

标签： html css html-email

【解决方案1】：

您可以通过将上面的元素包装在div 中并将包装器的高度设置为小于元素的实际高度来做到这一点。（例如，height:200px，如果元素自然是 300px 并且您想要 100px 的重叠）该元素将溢出包装器，但下一个元素将从包装器结束的地方开始。

在这里查看答案：How to position an element on top of another element without using position and margin?

还有这个例子： https://jsfiddle.net/acq3ob6y/1/

【讨论】：

这似乎不适用于 Android 版 Gmail（2018 年 3 月）。
是的，正如许多开发人员会告诉你的那样，为电子邮件设计/编码是一个令人难以置信的成功或失败的命题……这只是在某些电子邮件客户端中可能起作用的另一件事。 HTML/CSS 电子邮件中唯一一致的行为是没有什么是一致的。 :-)

【解决方案2】：

html 电子邮件中大多不支持负值。 CSS position 也是如此。至少对于网络邮件，这是为了使您的电子邮件不会呈现在所需窗口之外。想象一下 Gmail 的 CSS 或电子邮件会影响界面 - 他们限制了您可以专门用来防止这种情况发生的 CSS。

实现图像与容器重叠的唯一方法是伪造它。见this similar question for an example

【讨论】：