I'm trying to create a simple HTML email design. Within the design I want to stack more than element on top of each other, specifically, an img and some text on top of it.
Using divs and img tags this would be no problem but using tables feels way more clunky. I realise that tables by their very nature are not made for stacking one on top of each other btw
I've come up with a way of getting the text over the img but my question would be, is there a better way of doing this than I am?
Also am I just setting myself up for issues when it gets rendered out by various email clients?
<table style="width: 400px; height: 400px; background-color: red;">
<tr>
<td style="position: relative;">
<img id="img_element" src="" style="position: relative; z-index: 1; width: 300px; height: 300px; background-color: yellow;">
<div style="z-index: 2; position: relative; color: #000; left: 20px; top: -200px; font-size: 25px; ">
Text goes here...
</div>
</td>
</tr>
</table>
There is absolutely a better way of doing it!
Email clients will do weird things to your code, starting with what they accept - or don't: looking at https://www.caniemail.com/features/css-z-index/ and https://www.caniemail.com/features/css-position/ we see that this is not going to work for the Gmails (webmail, apps, anything).
So really, I should rephrase and not be punny--there is a hacky way of doing it that mostly works.
There is a technique called 'faux absolute' for HTML email as developed by Mark Robbins https://www.goodemailcode.com/email-enhancements/faux-absolute-position.html and Steven Sayo https://sayo1337.medium.com/overlay-email-absolute-positioning-efd2f2f09ed4