Наложение изображений в HTML-таблицу

Question

Я создаю шаблон электронной почты и использую таблицы для позиционирования материала. Я хотел наложить изображение поверх другого, но не смог этого сделать. Я использую следующее в строке, но это не похоже на работу. Если бы кто-нибудь мог мне помочь, я бы очень признателен.

 <td colspan="3" style="padding: 14px; background-color: rgb(241, 241, 241); font-size: 11px; font-family: arial,helvetica; color: rgb(69, 85, 95);
.under{
position:absolute;
left:80px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:50px;
z-index:1;
}">

Answer 1

У вас есть несколько проблем:

1. Вы не можете поместить классы в атрибут style.
2. Вы, очевидно, пытаетесь абсолютно позиционировать свои изображения, но их родительский элементимеет position: static (по умолчанию), поэтому они будут расположены относительно (вероятно) тела, а не ячейки таблицы.Абсолютно позиционированные элементы позиционируются относительно их ближайшего предка, положение которого отличается от статического.
3. Установка position на <td> может работать или не работать в зависимости от браузера, CSS2 фактически говорит, что настройкаposition:relative в элементах таблицы приводит к неопределенному поведению .

Вам нужно будет поместить <div> внутри вашего <td> и относительно позиционировать его.Затем поместите изображения в <div> и, поскольку вы имеете дело с электронной почтой, вставьте их стили.Результат будет примерно таким:

<table>
    <tbody>
        <tr>
            <td>
                <div style="width: 100px; height: 100px; position: relative; border: 1px solid #000;">
                    <img src="http://placekitten.com/50/50" width="50" height="50" style="position: absolute; top: 0; left: 10px; z-index: 2; border: 1px solid #0ff;">
                    <img src="http://placekitten.com/75/75" width="75" height="75" style="position: absolute; top: 0; left: 20px; z-index: 1; border: 1px solid #f00;">
                </div>
            </td>
        </tr>
    </tbody>
</table>

Я добавил границы, котят и явный размер на <div> для демонстрационных целей.Здесь есть живая версия: http://jsfiddle.net/ambiguous/TkF24/

Почтовые клиенты будут фильтровать CSS, и то, что получится, зависит от клиента.Возможно, вам придется вставить изображения вручную, а затем ссылаться только на одно изображение, чтобы оно работало надежно.

Answer 2

Вы не можете написать класс (ы) внутри атрибута style для элементов. Определения стилей должны быть записаны в таблице стилей или внутри элемента <style>