Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
330 views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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:


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...