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

I'm trying to send the image as position absolute with the html text behind the image but when I send it to gmail or other email it show image then in bottom the html text. The absolute css is not working.

Below is the template

<template name="welcome">
<html>
<head>

</head>
<body style="font-family: 'Roboto Slab', serif;">
<div class='container-fluid'>
    <img src="http://qa.couchfashion.com/images/mailer.png" style=" position: relative;width: 100%;left: 0;">

    <div style="top: -44px;position: absolute;z-index: 999999;">
        <div class='mailer-name text-center' >
            <h3 style=" font-size: 80px;"> Hey {{receiverName}} </h3>
        </div>
        <div class="mailer-content" style="margin-top: 120px;
            text-align: center;
            text-align: justify;
            padding-left: 10%;
            padding-right: 10%;">
            <h1 class="text-center"> Welcome to the COUCH </h1>
            <hr>
            <h3 class="text-center"> How To use Couch? </h3>
            <h2 class="text-center"> STEP 1 </h2>
            <h3 class="text-center"> Browse Products &amp; Articles </h3>
            <p>Congratulations ladies! You've successfully made it to the first step of Couch. THis step is the
                easiest
                step. We are sure you will have great time browsing through our products and articles as we get you
                the
                best of them. We make sure best gets the best! </p>

            <h2 class="text-center"> STEP 2 </h2>
            <h3 class="text-center"> Collect things you Love </h3>
            <p>
                Hello again! So here we are on the second step. Well this is easy too. You just have to click on the
                love
                button to collect your favourite products and articles there. And there you go. You have your very
                own
                personalized collection. Woo-Hoo!
            </p>


            <h2 class="text-center"> STEP 3 </h2>
            <h3 class="text-center"> Get Appreciation </h3>
            <p>This is the best step. It will help you flaunt your beautiful talents ladies! People can see your
                closet
                and have a glance at your choice. Isn't that cool? You can promote your style and make it popular.
                Let's
                get started ladies!</p>
            <h3 class="text-center"> Thanks for signing up </h3>
            <h3 class="text-center"> All the Love &amp; Regards </h3>
            <h4 class="text-center"> Team COUCH </h4>
        </div>
    </div>
</div>
</body>
</html>

Solution

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.