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

你有几个问题：

您不能将课程放在style属性中。
显然，你试图绝对定位你的图像，但他们的父母有position: static（默认），所以他们将被定位在（可能）身体而不是表格单元格。绝对定位的元素相对于其最近的祖先定位，其位置不是静态的。
在position上设置<td>可能会或可能不会取决于浏览器，CSS2实际上会在表格元素results in undefined behavior上设置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> 元素

内

在html表格中叠加图像

2 个答案: