Is it safe to use position:absolute
in a email template?
For Outlook we can actually use regular CSS absolute positioning, which may surprise you to have this more advanced CSS support in Outlook. However there is a catch. Outlook does support absolute positioning but only when done inside VML. So here inside conditional comments <!
When you need something to be positioned in an very specific spot you would use absolute positioning. For instance you may want to have an image with an overlapping caption that always sits at the top of the picture (say 20px from the top).
Gmail doesn't support absolute positioning in emails, but I have a situation that requires something like absolute positioning. I am using tables for layout but I need to display one <div> that is inside a <td> outside of its container table (show the <div> above the <table>).
We can use CSS absolute positioning to overlap elements, but there's some advantages to using CSS grid instead.
Depends on which mail clients your users are using. Outlook for example handles position: absolute well, Thunderbird on the other hand doesn't.
I would try designing your mail-template as "normal" as possible. Tables help a lot for example (yuck).
See the following page about styling tips on HTML mails, including some position absolute advice:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With