Layering elements in an email

It's been a long time now that the layering of elements in a website is not a problem, but it happens that our playground is emails, and in the email, it remains very problematic.

Now recently, Thomas sent me an article talking about this, and it turns out that three email stars - because yes, email has its starsEven if they don't earn as much as a movie or soccer star, they have developed an alternative technique to achieve a similar look.

Steven Sayo, Mark Robbins and Rémi Parmentierhave done a little bit of R&D to show us a technique to make a block pass in front of another block, in superposition, in an email.

If background images allow you to have any element in front of an image, here the beauty of this technique is that it allows you to have an element in front of any other element.
You will find on the following links thearticle and the Codepen of Steven Sayo offering a demo.

Let's take a look at how this works, this overlay in an email...

We have:

<div class="over-mob" style="max-height:340px; margin: 0 auto; text-align: center;">

Which contains the top image.
You can see in the code that the image is 400px high, but that the div is well informed in max-height at 340px. The class over-mob is only there to modify this height for the mobile version.

The next element, which will pass over the image, is the following table:

<table role="presentation" class="faux-absolute reset" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="position:relative; opacity:0.999;">

So that this table goes well above the image, it is necessary to activate the property z-indexThis property is not well supported when we try to pass values to it.

Yes, but you just have to activate it, not pass values to it. And to do that, the opacity does the trick. That's why we put an opacity almost equal to 1 (I dare you to see the difference with the naked eye between 1 and 0.999... ). Why the property opacity do this? Because.
If the logic of code interpretation in email rendering engines made sense, we would know...

And it must be combined with the property position:relative for some email clients. One more time, because.
The class faux-absolute is, I think, inherited from Mark Robbins' technique which is slightly different. For this method, the max-height:0 did not prove to be essential in my tests.
And there you have it, the trick is played...

...except on Outlookof course. For Outlook, we will have to intervene with VML and created a block v:rect with the widths and heights entered, as well as a block v:text to position it correctly.

An alternative version

Concerning Mark Robbins' methodit is slightly different. It consists of writing, in the HTML code the element that will go over first and then the background element. Here we are more in a use that resembles background images. And this is where the max-height:0 takes its meaning, since it is that which allows the element of "float"above. But this only works for an element that is completely on top of each other, and not just on horseback. For in the case of a straddle element, the rest of the content must be displayed in continuityand does not pass behind the horse element which is "floating"This is what will happen with this method.

Personally, I have a preference for Steven Sayo's approach. I find it semantically more correct in reading order and, for me, simpler to grasp.

So, the superposition of elements in an email: revolution or damp squib?

I find that it isa very nice technique to superimpose the elements but, admittedly, it will not revolutionize the world. This technique is more powerful, sinceit allows overlapping of elements that are not necessarily imagesBut this requires to fix the height of these elements. And when we know that the interpretation of email clients can bring sometimes slightly different sizes, sometimes even bringing a line of text more, I think it will be risky, not to mention the mobile rendering (goodbye fluid in this case).

And most importantly, especiallyOutlook; again and again. If this technique had made it possible to get rid of the VMLwe would have had something really powerful. But here, we still have to go through that damn VML, which still prevents us from using multiple background images (for the body and for a block for example). This also requires us to set solid the height of the block VMLwhich removes the reusability of the code.
In short, in my opinion, this is just another approach to a design with background images.

And at the same time, I'm sure there is a way to be creativewith a example of a promotional sticker made once again by Steven Sayo. Matthieu Solente, a promising email coder, has also published a subject on Github about overlaying elements in an email and Outlook in particular.

What about you? What do you think about it? Do you think that this technique could change your way of coding? Do you know that we offer training on HTML integration in an email ?