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