z-index ignored in newsletter

问题

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

When i send this newsletter to gmail for example, the z-index is ignored. what i want is the text over the img. But it will be rendered first the image and then the text.

Basically the z-index is ignored. this can be solved, or i can't use z-index?

回答1:

Update: This list has been moved to here: Best Practices & Considerations when writing HTML Emails

You shouldn't use z-index, divs, position or float. Basically your whole approach to html email is wrong. Html email is a different beast to html for web. Here are some resources:

Campaign Monitor
Mailchimp
Sitepoint
Reach Customers Online
Tuts+

Small parts of the info in some of these aren't technically 100% correct (html email truly is a black art), but they'll get you 99% the way there.

Additional Support Guides:

Campaign Monitor's CSS Guide
Campaign Monitor's Responsive Guide
Style Campaign's Responsive Guide

You'll need to use VML to get background images working in Outlook also. Here are some VML links:

Bulletproof Backgrounds
Bulletproof Buttons

You should always inline your CSS in html-email. Here is a link to a list of CSS Inlining tools:

Inlining Tools (Stack Overflow)

回答2:

Gmail is the only client that does not support z-indexing, so it seems. http://www.campaignmonitor.com/css/

Maybe this is the core of your issue. Also, may I ask why you want text to appear over an image on an eblast? The simple solution is to have the image be the background of an element and just have the text inside of that. Any complicated markup will likely result in chaos for an email campaign.

Either photoshop the text into the image or have the image be the background.

来源：https://stackoverflow.com/questions/19780614/z-index-ignored-in-newsletter