在html表中覆盖图像

我正在创建一个电子邮件模板，并使用表格来定位内容。我想将一个图像重叠在另一个图像上，但无法做到这一点。我连续使用了以下内容，但似乎不起作用。如果有人能帮我，我会非常感激

 <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;
}">

---

您不能在元素的样式属性内部编写类。样式定义应该写在样式表中或

元素中

您有几个问题：

不能将类放入

样式

属性中

显然，您正在尝试绝对定位图像，但它们的父对象具有

位置：static

（默认设置），因此它们将相对于（可能）主体而不是表格单元格进行定位。绝对定位的元素相对于其最接近的祖先进行定位，该祖先的位置不是静态的

在

上设置

位置取决于浏览器，CSS2实际上表示在表元素上设置
位置：相对

您需要在您的

中放置一个

，并将其相对定位。然后将图像放在

中，因为您处理的是电子邮件，所以将它们的样式内联起来。结果会是这样的：

<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>

为了演示，我在

上添加了边框、小猫和显式尺寸。这里有一个实时版本：

---

电子邮件客户端将过滤CSS，通过的内容取决于客户端。您可能需要手动将图像粘贴在一起，然后仅引用一个图像才能使其可靠工作。

stack overflow上人们的帮助从未停止让我感到惊讶：）谢谢您的回复！我现在就试试。它在你发送的演示站点上运行，但当我在电子邮件中插入完全相同的代码时，它会将它们排成一行，而不是重叠。有没有我可以pm你我的代码？（我用它来创业，不想公开发布。）我明白这是否太麻烦了。@iman453:我真的不想看别人的非公开代码，这涉及到一些道德问题。您能在JSFIDLE上生成一个结构等效的版本，允许公开发布吗？当然。（它在此处覆盖，但在发送电子邮件时不覆盖）。万分感谢，我真的很感谢你的帮助@iman453:您可以先在HTML中位于下方的

之后放置位于顶部的

，这样就不需要

z-index

。然后在尽可能多的电子邮件客户机中进行测试。如果这不起作用，那么可能需要在服务器上进行一些ImageMagick“动态图像合成”。