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/