Question

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;但是没有用。请帮忙！

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

Answer 2

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

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

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

2 个答案: