Absolute positioning in email

You can't use absolute positioning in email.

Well actually you can a bit. It is supported in modern email clients; iOS, Android, Applemail, AOL etc. But it still gets stripped from the likes of Gmail, Outlook.com, Outlook 365 and obviously Outlook desktop.

Yahoo mail is a funny one, it supports position:absolute; but not top bottom left or right therefore rendering it useless.

It was actually when testing the below hack that I found Yahoo supports position:absolute; and prematurely shared the news on twitter without realising the debilitating caveat. So by way of apology here's how to do position absolute in Yahoo and almost every other email client.

Absolute positioning that works everywhere

(Except Outlook on desktop pc, but what do you expect from Microsoft Word rendering)

So first of all you need to set a container to position against.

<div style="width:300px;height:300px;">  
</div>  

Then place an element inside that, set display as inline-block and position it with margin-top and margin-left.

<div style="width:300px;height:300px;">  
    <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
    </div>
</div>  

N.B. Unfortunately negative values in the margin won't work in Gmail, Outlook.com or 365.

The element is now behaving similar to position:relative but we want position:absolute so as not to affect the flow of any neighbouring elements. To achieve this wrap the inner element in a div with max-height:0;max-width:0 this now mean that div takes up no space on the page, but the overflow can still be seen.

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div>  

You can now place multiple elements in that container and position them absolute. In this example I've added outlines and semi transparent background colours to clear display the outcome.

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">  
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
            1
        </div>
    </div>
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
            2
        </div>
    </div>
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
            3
        </div>
    </div>
</div>  
1
2
3


Outlook

Ok so it still doesn't work in desktop Outlook but it does work pretty much everywhere else I've test.

But please do use this wisely. Do consider Outlook, perhaps a VML fallback or simply using Outlook conditional comments.