Overlay & Email Absolute Positioning.
Earlier this year I collaborated on an email design that had a textbox slightly overlaying an image. The design looked great but I didn’t want this to be a slice ’n’ dice image in an email. That’s not how we roll! To achieve this overlapping feature the answer was Absolute Positioning.
While this is something that is easily achievable in a Web Dev environment, in an email it’s a whole different story. There are so many quirks you have to account for in the variety of email clients that are out there. Originally when I coded this email there wasn’t a comprehensive guide to absolute positioning for HTML emails. Mark Robbins, Rémi Parmentier and I have come together to bring you an in-depth guide and use cases of this method.
- The Comprehensive Guide by Mark Robbins
Overlay Design
The above design is a generic recreation of the email I made featuring a textbox overlaying the main hero image. To create this we have the <img> tag contained inside a <div> with a height set just smaller than the <img> itself. This means that it would bring any content up over the image. I would call this method Bottoms Up as other examples start with items overlaying from the top and giving them margins top and left. However, if I had chosen to use that method it would require massive margins which seems illogical.
To get the <table> containing the text to overlay the image I would need to give an position: relative; style. But as you may know, with HTML emails it’s not that easy due to the lack of support on email clients. Therefore using some email wizardry we can simulate that by adding the opacity:0.999 as it will make sure that the <table> will sit above the <img>. You can find an in-depth explanation in Mark’s complete guide
Due to my design also being responsive means that the width and height of the image will change. Keep this in mind as the height of the <div> containing the image was set at a static value which means when the image grows smaller, the <div> container will not. This results in the text not overlaying when the design is on a smaller device. To tackle this problem I gave the containing div a class with a new height set using media queries and popular breakpoints. It is always best to test and experiment with different values to find the one you are happy with.
Overall I hope this gives you some inspiration on how you could use absolute positioning in your next design. If you need help on implementation or have any questions #emailgeeks slack is the best place to be. Alternatively, reach out to Mark, Rémi or myself and let us know what you think and show us your designs.
Try it yourself
If you fancy trying this method out don’t forget to check out Mark’s complete guide or, like me, you like to work with a live example to understand how it works you can check out my codepen.
Support
Currently this template is well supported apart from on Mail.ru, T-Online.de and Telstra.
