title: Overlay images on one another in outlook (absolute positioning)
body: <p>I'm struggling to find a cross-email-client way of stacking images on top of one another. I'm looking for something that would also work for Outlook. I am also using the inky templating language from foundation/zurb, although I can still write whatever html/css I want.</p>
  
  <p>I had successfully used <a href="http://blog.gorebel.com/absolute-positioning-in-email/" rel="nofollow noreferrer">http://blog.gorebel.com/absolute-positioning-in-email/</a> trick of 0-width/height container with overflow to make it work on all other email clients, only Outlook is the bad child.</p>
  
  <p>Has anyone got tricks to overlay images (not backgrounds) on top of one another in Outlook ?</p>
  
  <p>EDIT</p>
  
  <p>The target : <a href="https://imgur.com/a/xFq4d" rel="nofollow noreferrer">https://imgur.com/a/xFq4d</a>
  As you can see on this image, the "header" of the card has two images : one classic avatar as a rounded image, and the same "avatar" has some filters applied and is used as background image with a special rounder corner</p>
  
  <p><em>NOTE : I am the blurr filters/round corners are unavailable on some email client, we'll have alternative code to cope with that on those email clients that are not supported</em></p>
  
  <p>The absolute positioning code I was using before (I am in the process of rewriting divs to use inky's rows/columns that transform the code to use tables</p>
  
  <pre><code>&lt;div class="professional-card"&gt;
      &lt;div class="header"&gt;
          &lt;div class="absolute-wrapper"&gt;
              &lt;div class="avatar-background-wrapper absolute-in-wrapper"&gt;
                  &lt;%= avatar_img(class: 'avatar-background') %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="absolute-wrapper"&gt;
              &lt;div class="avatar employee %&gt; absolute-in-wrapper"&gt;
                  &lt;%= avatar_img %&gt;
                  &lt;div class="firstname"&gt;
                      &lt;%= model.user.first_name %&gt;
                  &lt;/div&gt;
                  &lt;div class="company-name"&gt;
                      &lt;%= model.company_name %&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;div class="absolute-wrapper"&gt;
              &lt;div class="absolute-in-wrapper"&gt;
                  &lt;div class="position"&gt;
                      &lt;%= model.position %&gt;
                  &lt;/div&gt;
                  &lt;ul class="tags"&gt;
                      &lt;%= tags %&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="absolute-wrapper"&gt;
              &lt;div class="absolute-in-wrapper"&gt;
                  &lt;div class="company-logo"&gt;
                      &lt;%= logo_img %&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The absolute positioning SCSS code corresponding to the mentioned trick (that is automatically inlined in the message)</p>
  
  <pre><code>.absolute-in-wrapper {
      display: inline-block;
  }
  
  .absolute-wrapper {
      max-height: 0;
      max-width: 0;
      overflow: visible;
  }
  </code></pre>