Есть ли альтернатива негативному позиционированию в электронных письмах 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
и установив высоту обертки меньше фактической высоты элемента. (например, height:200px
если элемент естественно 300px, и вы хотите наложение 100px). Элемент будет переполнять оболочку, но следующий элемент начнется там, где заканчивается оболочка.
См. Ответ здесь: как позиционировать элемент поверх другого элемента без использования позиции и поля?
И пример: https://jsfiddle.net/acq3ob6y/1/
Отрицательные значения в основном не поддерживаются в html-письме. Также position
CSS. По крайней мере, для веб-почты это означает, что ваша электронная почта не будет отображаться вне требуемого окна. Представьте Gmail с вашим CSS или электронной почтой, затрагивающей интерфейс - они ограничили CSS, который вы можете использовать специально, чтобы предотвратить это.
Единственный способ выполнить изображение, перекрывающее контейнер, - это подделка. См. Подобный вопрос для примера
margin-top:-100px
на реальном изображении, а не на td?