Absolute Positioning in Gmail Emails

Absolute positioning in gmail emails

Unfortunately, you can't use position: absolute.

Also, because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.

Most HTML emails are laid out with tables.

Check this out.

Workaround to position:absolute as it does not work well with email readers like Gmail

Use <br> and try reconfiguring the width of the button

<button style="height:90px; font-size:26px;  background-color: #4CAF50; width: 300px ">
<a href="https://api.whatsapp.com/send?phone=0034644776771&text=¡Hola!" style="vertical-align:middle; color:white; text-decoration: none;"> <img style="height:80%;vertical-align:middle;" src="https://i.imgur.com/XcXLJBA.png" align="left">  <span style=" font-size: 60%"> Need help?</span> <br> <span style="margin-left:0px;"> Send WhatsApp </span></a></button>

How to send image to email as position absolute with html text

CSS position is not supported in most email clients (both relative and absolute). Best way to achieve this is by making the image a background image:

<table role="presentation" aria-hidden="true" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
    <tr>
        <td background="http://qa.couchfashion.com/images/mailer.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
            <div>
                <table role="presentation" aria-hidden="true" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 15%ont-family: sans-serif; font-size: 15px;">

                            >> Place your text layout in tables instead of divs <<

                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

It's also still safer to use <table>s instead of <div>s for email, unless Gmail is the only client you have to support.

email template position absolute?

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:

Style In Email

Gmail removes position:relative as inline CSS (Email Template)

Sadly, I suspect you may have to abandon your perfectly reasonable ideas of divs and positioning when designing for email. CSS support in email clients is a tangled nightmare.

The only (relatively) surefire way of forcing layout on email is to go with an old school tables layout, which is unfortunate, but unavoidable.

Campaign Monitor has an excellent summary of email client CSS support here.

HTML CSS relative position not working in gmail

Designing newsletters are somewhat finicky with divs as support is limited for some css features across various platforms and support varies from platform to platform.

For Newsletters, I suggest that you use HTML tables tags to design your newsletter as it provides bulletproof formatting for newsletters across different email clients including Outlook and Windows 10 Mail.

I think the CSS position is not supported in Gmail. Answers to similar questions are available in StackOverflow though.

You can refer to the following link for the compatibility check
https://www.campaignmonitor.com/css/positioning-display/position/

How does Gmail prevent overlap for elements that use absolute positioning?

You can use javascript for that. You can bind to the resize event of the window object and recalculate and reposition your elements when the browser is resized.

In plain javascript:

window.onresize = function(event) {
    // recalculate
};

In jQuery:

$(window).resize(function(event) {
    // recalculate
});

Another option is to have a position:relative on the container surrounding the absolutely positioned elements. If that relative container resizes with the browser window then the absolute containers inside it will move with it.

Absolute Positioning in Gmail Emails