z-index 在时事通讯中被忽略答案

【问题标题】：z-index ignored in newsletterz-index 在时事通讯中被忽略
【发布时间】：2013-11-15 19:58:59
【问题描述】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Thank you for subscribing to our newsletter!</title>

        <style>
            img.img {
                z-index: -1;
                position: absolute;
                float:left;
            }

            .content {
                position: relative;
                z-index: 5;
            }
        </style>

    </head>
    <body>

        <div style="width: 750px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
            <img class="img" src="email.png" />

            <div class="content">
                <h1>Text<small>app</small></h1>

            </div>
        </div>
    </body>
</html>

例如，当我将此时事通讯发送到 gmail 时，z-index 将被忽略。我想要的是img上的文字。但它会先呈现图像，然后呈现文本。

基本上 z-index 会被忽略。这个可以解决，还是不能用z-index？

【问题讨论】：

在世界停止使用过时的邮件客户端之前，您基本上必须像 1990 年编写网站那样编写 html 电子邮件。您可以使用 z-index，但许多服务会忽略它。除此之外，在绝对定位元素上浮动没有任何用处。您可能需要指定顶部和左侧。或者尝试将图像应用为背景图像，但这也取决于邮件客户端来传递。
旁注： 并非所有电子邮件客户端都支持 <head> 中的 CSS；有些人会把它剥掉。对 HTML 电子邮件使用内联 CSS。

标签： html css z-index newsletter

【解决方案1】：

更新：此列表已移至此处：Best Practices & Considerations when writing HTML Emails

您不应使用 z-index、div、位置或浮点数。基本上，您处理 html 电子邮件的整个方法都是错误的。 Html 电子邮件是与 html for web 不同的野兽。以下是一些资源：

其中一些信息的一小部分在技术上并非 100% 正确（html 电子邮件确实是一种魔法），但它们会让您 99% 正确。

其他支持指南：

您还需要使用VML 来获取在 Outlook 中工作的背景图像。以下是一些 VML 链接：

您应该始终在 html-email 中内联您的 CSS。这是 CSS 内联工具列表的链接：

Inlining Tools (Stack Overflow)

【讨论】：

【解决方案2】：

Gmail 是唯一不支持 z-indexing 的客户端，看起来是这样。 http://www.campaignmonitor.com/css/

也许这是您问题的核心。另外，我可以问一下为什么您希望文本出现在 eblast 上的图像上？简单的解决方案是让图像成为元素的背景，并在其中包含文本。任何复杂的标记都可能导致电子邮件活动的混乱。

要么将文本 Photoshop 放入图像中，要么将图像作为背景。

【讨论】：

还请考虑仅提供图片会增加您的时事通讯爆炸被视为垃圾邮件的机会。我们鼓励您拥有“健康”的文字与图像比例，但您想定义它。