Overlaying images within a html table

Question

I'm creating an email template and using tables to position stuff. I wanted to overlap an image over the other, but am not able to do so. I'm using the following within a row, but it doesn't seem to work. If someone could help me out, I'd really appreciate it.

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

Solution 1

You have several problems:

1. You can't put classes in a style attribute.
2. You are, apparently, trying to absolutely position your images but their parent has position: static (the default) so they would be positioned with respect to (probably) the body rather than the table cell. Absolutely positioned elements are positioned with respect to their closest ancestor whose position is anything other than static.
3. Setting a position on a <td> may or may not work depending on the browser, CSS2 actually says that setting position:relative on table elements results in undefined behavior.

You'll need to put a <div> inside your <td> and relatively position that. Then put the images inside the <div> and, since you're dealing with email, inline their styles. The result will be something like this:

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

I've added borders, kittens, and an explicit size on the <div> for demo purposes. There's a live version over here: http://jsfiddle.net/ambiguous/TkF24/

Email clients will filter CSS and what gets through depends on the client. You might have to paste the images together by hand and then reference just one image to make it work reliably.

Solution 2

You can't write up a class(es) inside of the style attribute on elements. Style definitions should be written in the stylesheet or inside the <style> element

Comments

[iman453]

The helpfulness of people on stack overflow never ceases to amaze me :) Thanks for your reply! I'll try that out now.

[iman453]

It works in the demo site you sent, but when I plug the exact same code in my email, it lines them up next to each other instead of overlaying them. Is there anyway I could pm you my code? (I'm using it for a start up and don't want to post it publicly.) I understand if it's too much of a hassle.

[mu is too short]

@iman453: I don't really want to look at someone's non-public code, there are some ethical issues involved in that. Can you produce a structurally equivalent version on jsfiddle that can be allowed out in public?

[iman453]

Sure. jsfiddle.net/DLD3p (It overlays it here, but not when the email is sent). Thanks a million, I really appreciate your help!

[mu is too short]

@iman453: The positioning works in GMail but the z-index doesn't as GMail strips that out. You could try changing the order of the absolutely positioned elements so that you don't need to set the z-index. You could also give up on positioning, paste the images together by hand, and then just use one image in the email. The CSS that gets through an email client will vary so keeping it as simple as possible is probably your best bet.

[iman453]

The problem is that I'm not sure what image I'm going to need to overlay. It would depend on an image given by the user. I guess I'll need to find some library that does that. Thanks for your help, I really appreciate it :)

[mu is too short]

@iman453: You could start by putting the <img> that goes on top after the <img> that goes underneath in the HTML so that you don't need z-index. Then test that in as many email clients as you can. If that doesn't work, then maybe some ImageMagick "on the fly image compositing" on the server might be needed.

[chhhris]

Gmail removes position: relative;... I tried the approach in this answer to overlay two images. Looked good in iOS Mail app, Mailbox app; looked terrible in Gmail and Google Inbox.

[mu is too short]

@chhhris: Hence my suggestion to simplify things and manually overlay the images so that you don't have to rely on anything fancy happening in the mail client. I even say "You might have to paste the images together by hand and then reference just one image to make it work reliably." in the answer.