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?

John

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:

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:

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

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

Inlining Tools (Stack Overflow)

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