Перекрывающиеся таблицы / отрицательная верхняя позиция в электронной почте HTML

0

Есть ли альтернатива негативному позиционированию в электронных письмах 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; но это не сработало. Пожалуйста помоги!

  • 2
    margin-top:-100px на реальном изображении, а не на td?
  • 0
    Это сработало! Спасибо! Но работают ли отрицательные значения в электронной почте HTML?
Показать ещё 3 комментария
Теги:
html-email

2 ответа

2

Вы можете сделать это, обернув элемент выше в div и установив высоту обертки меньше фактической высоты элемента. (например, height:200px если элемент естественно 300px, и вы хотите наложение 100px). Элемент будет переполнять оболочку, но следующий элемент начнется там, где заканчивается оболочка.

См. Ответ здесь: как позиционировать элемент поверх другого элемента без использования позиции и поля?

И пример: https://jsfiddle.net/acq3ob6y/1/

Поделиться
  • 0
    Похоже, это не работает в Gmail для Android (март 2018 года).
  • 0
    Да, как скажут многие разработчики, проектирование / кодирование для электронной почты - это невероятное предложение ... это просто еще одна вещь, которая может работать в некоторых почтовых клиентах. Единственное непротиворечивое поведение в электронных письмах HTML / CSS состоит в том, что ничего непоследовательного. :-)
1

Отрицательные значения в основном не поддерживаются в html-письме. Также position CSS. По крайней мере, для веб-почты это означает, что ваша электронная почта не будет отображаться вне требуемого окна. Представьте Gmail с вашим CSS или электронной почтой, затрагивающей интерфейс - они ограничили CSS, который вы можете использовать специально, чтобы предотвратить это.

Единственный способ выполнить изображение, перекрывающее контейнер, - это подделка. См. Подобный вопрос для примера

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню