Можно ли использовать absolute в верстке письма?

Есть ли варианты использовать абсолют, ну и соответственно right, left, top, bottom? У меня задача встала, нужно на огромную картинку наложить ссылки и их расставить по местам. Есть варианты? Вообще хоть как то можно использовать CSS в вёрстке письма?


Ответы (1 шт):

Автор решения: Sevastopol'

Если вы готовите HTML-документ для почтовой рассылки, то CSS отдельным файлом выносить не получится. Многие почтовые программы обрезают все внешние CSS файлы и медиа-запросы. В данном случае для определения стиля элементов письма с помощью правил CSS применяется атрибут style. Вот его синтаксис:

<тег style="правила описания стилей"></тег>

В качестве значений указываются обычные стилевые правила. Вначале имя стилевого свойства, а затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой. Атрибут style применяется к различным тегам.

Это была небольшая теория. Теперь вернемся непосредственно к вашему вопросу:

У меня задача встала, нужно на огромную картинку наложить ссылки и их расставить по местам.

Приведу вам простой пример, где показано, каким образом можно решить вашу задачу:

<div style="position: relative; width: 500px; height: 300px;
background: url(https://i.imgur.com/Joed5du.jpg);
background-position: bottom right;">
<a href="#" style="position: absolute; top: 60px; left: 50px;">Ссылка 1</a>
<a href="#" style="position: absolute; bottom: 50px; left: 85px;">Ссылка 2</a>
<a href="#" style="position: absolute; top: 85px; right: 80px;">Ссылка 3</a>
</div>

Однако, при всём этом нужно ещё учитывать, что некоторые почтовые клиенты в целях безопасности могут вырезать часть HTML-кода письма. Кроме этого, и каждый провайдер может по-разному реагировать на одно и то же свойство.


upd. Добавил пример, в случае, если у вас табличная вёрстка. Хотя, исходя из моего уже многолетнего опыта по email-рассылкам, могу утверждать, что абсолютно никакой разницы нет, какая будет вёрстка.

<table style="border-collapse: collapse; border-spacing: 0;
position: relative; width: 500px; height: 300px;
background: url(https://i.imgur.com/Joed5du.jpg);
background-position: bottom right;">
    <tbody>
        <tr>
            <td>
<a href="#" style="position: absolute; top: 60px; left: 50px;">Ссылка 1</a>
<a href="#" style="position: absolute; bottom: 50px; left: 85px;">Ссылка 2</a>
<a href="#" style="position: absolute; top: 85px; right: 80px;">Ссылка 3</a>
      </td>
        </tr>
    </tbody>
</table>

→ Ссылка