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

最佳答案

您可以通过将上面的元素包装在div中并将包装器的高度设置为小于元素的实际高度来实现。 (例如,如果元素自然为300px,并且您希望重叠100px,则为height:200px)元素将使包装器溢出,但是下一个元素将从包装器结束处开始。

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

和示例:
https://jsfiddle.net/acq3ob6y/1/

10-05 20:54
查看更多