#EmailCSS | Position:absolute (chapter 87 of the Kamasutra)

Fellow email integrators and #emailgeeks, this speech is for you: "Jean and Georges embrace their family and greet BichetteI repeat: "Jean and Georges embrace their family and greet Bichette. Ah ah! That's a good one, what a laugh I am! Nah, no kidding, my message is this: Have you already tested an "absolute" positioning within your HTML integrations? You've thought about it, it's inevitable. And you certainly backed off when you saw the complications it would cause (I am practicing for the Goncourt prize)

However, I say it with a sure and nasal voice: You will now be able to, with the help of this article, consider the "absolute" position in your next campaigns! The proof is in the pudding this piece of paper this support table (below) of the solution I am about to develop...

Support of the absolute

Solution / Webmail	Support
iPad Air iOS 9
iPad Air iOS 10
iPad Mini iOS 9
iPad Mini iOS 10
iPad Pro iOS 10
iPad Retina iOS 9
iPad Retina iOS 10
iPhone 5S iOS 9
iPhone 6 iOS 9
iPhone 6 iOS 9
iPhone 6 Gmail iOS 10
iPhone 6+ iOS 9
iPhone 6+ iOS 10
iPhone 6+ Gmail iOS 10
iPhone 7 iOS 10
iPhone 7+ iOS 10
iPhone 8 iOS 11
iPhone SE iOS 10
Nexus 5 Android 5.1
Nexus 5X Gmail Android 6
Pixel Gmail Android 7
Pixel Outlook Android 7
Pixel Yahoo Android 7
Apple Mail 9 OSX 10.9
Apple Mail 10 OSX 10.10
Lotus Notes 8 Windows 7	One image under another, but what can we expect from Lotus Notes 8...
Lotus Notes 8.5 Windows 7	The values entered for position seem to be divided by 2
Outlook 2003 Windows 7	The values entered for position seem to be divided by 2
Outlook 2007 Windows 7
Outlook 2010 Windows 7
Outlook 2011 OSX 10.8
Outlook 2013 Windows 7
Outlook 2016 OSX 10.8
Outlook 2016 Windows 7
Outlook 2016 Windows 10
Thunderbird Windows 7
AOL Chome OSX 10.10
AOL Chome Windows 7
AOL Firefox OSX 10.10
AOL Firefox Windows 7
AOL IE 10 Windows 7
AOL IE11 Windows 7
AOL Safari OSX 10.10
Comcast Chrome Windows 7
Comcast Firefox Windows 7
Gmail Chrome OSX 10.10
Gmail Chrome Windows 7
Gmail Firefox OSX 10.10
Gmail Firefox Windows 7
Gmail IE11 Windows 7
Gmail Safari OSX 10.10
Google Apps Chrome Windows 7
Google Apps Firefox Windows 7
Google Apps IE 11 Windows 7
Office 365 Chrome Windows 7
Office 365 Firefox Windows 7
Office 365 IE 10 Windows 7
Office 365 IE 11 Windows 7
Outlook.com Chrome OSX 10.10
Outlook.com Chrome Windows 7
Outlook.com Firefox OSX 10.10
Outlook.com Firefox Windows 7
Outlook.com IE 10 Windows 7
Outlook.com IE 11 Windows 7
Outlook.com Safari OSX 10.10
Yahoo! Chrome OSX 10.10
Yahoo! Chrome Windows 7
Yahoo! Firefox OSX 10.10
Yahoo! IE 10 Windows 7
Yahoo! IE 11 Windows 7
Yandex.ru Chrome Windows 7
Yandex.ru Firefox Windows 7
Free.fr Chrome Windows 7
Free.fr Firefox Windows 7
GMX Chrome Windows 7
Laposte Chrome Windows 7
Libero Chrome Windows 7
Libero Firefox Windows 7
Mail.ru Chrome Windows 7
Nate Chrome Windows 7
Naver Chrome Windows 7
Orange.co.uk Chrome Windows 7
Orange.com Firefox Windows 7
SFR.fr Chrome Windows 7
SFR.fr Firefox Windows 7
T-Online.de Chrome Windows 7	Does not take Outlook comments into account and will cause problems for the rescue solution
Telstra/BigPond Chrome Windows 7
Web.de Chrome Windows 7

It amazes you, doesn't it! A short while ago, I was thinking about putting places three magazine covers on top of each otherwith, for each of them, a left margin incremented by 20 pixels.

Why didn't you design this project directly in one image? Because I was eager to apply a link to each cover and to make these covers dynamic, in order to propose the last issue of each publication (and also because I wanted to publish an article on the subject, let's be honest, I am a vile and disgusting being in search of glory and notoriety...) 

Search

I started digging like the weasel I am in search of (not vain) information about the "position:absolute" support in an email. Soon, I was browsing the article of Mark Robbins (a leading figure at GoRebelMailA powerful electron, a glorious light in a few words). Mark developed the thesis that ownership was rather poorly tolerated on all email and webmail software. Mr. Robbins therefore submitted another technique, imitating the coveted property.

Code and truth

(yes, it is only an equivalent to the property position, I admit)

It piques your curiosity eh, admit it! To summarize the approach, the postulate is to deploy a first element (<div>) with fixed width and height

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

Within this entity, insert a second <div> inline-block, and set a position for it via 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>

Let's note in passing that negative values would not work on Gmail, Outlook.com and Outlook 365. So this element has a behavior similar, for the moment, to a position:relative. But to get a behavior close to the desired position:absolute, we will wrap this <div> in a third party <div>with a max-height :0 ; max-width :0. In fact, the <div> does not take up any more space on the page, but its content is still visible.

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

If we were to confine ourselves to this exercise, the expected result would not be convincing on Yahoo. In reality, Rémi Parmentier (a leader in HTML/CSS experimentation in emails, a powerful electron, a light... You'll have understood the principle) raised that Yahoo adds the CSS properties overflow-x:auto and overflow-y:auto when it sees the max-width and max-height properties. To remedy this, we need to add a :visible overflow to the second <div>.

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

This version of the code is remarkable... But not completed! Because it doesn't stop there. If I stop working here, my content will not show up on Yahoo Mail IE10 and IE11, leaving behind some meaningless white areas... And you're starting to know me (I hope so...)I like to achieve a successful result! While following the comments, discussions and remarks, I realized that adding an important !stuck to the "visible" overflow helped to solve the problem and allowed to reach the ultimate support mentioned above: an equivalent to the absolute position !

Does this seem opaque to you? Ok, ch'bim, let's go to the fun mode: here is the whole code below. Treat yourself with ctrl+c ctrl+v. It's a gift. I love me.

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

Reminder

Well we don't forget, carefree little ones, that on Outlook 2007, 2010, 2013, 2016 (windows 7 and windows 10)If we do nothing, it stings the eyes! Ahhhh ah I see you coming, you forgot... But I have everything planned, guys! THEY DON'T DO IT TO ME !!! I even prepared a whole code example and a workaround for you because I knew it would happen like this, I KNEW IT!!! AH AH!!! EVIL GEEKERY !!!!!!!!! (and I remind by the same occasion that it is not about the absolute position, but about a similar result acquired by other methods)