Changing the Stacking Order of Elements Without z-index

I recently learned that its possible to change the stacking order of elements without using z-index. This can be done by using other CSS properties to create what is called a new “stacking context”.

This article goes into the details of stacking context and how certain CSS properties affect them.

Z-Index in Email

The problem about using z-index to change the stacking order in email is that few clients support it. This is because for the most part it requires the use of the positioning property which is not supported by the majority of email clients – especially the Web based ones with the exception of AOL Mail. Yahoo! Mail actually supports relative positioning which we will get to later.

Interestingly we can use other CSS properties to “bump” elements that appear under other elements in the DOM above them by creating a new stacking context.

Creating a New Stacking Context

In the code below, you can see that the blue box overlaps the red box because the red box appears earlier in the DOM in the natural stacking order.

<div style="height:50px;">
  <div style="width:100px;height:100px;background-color:red;"></div>
</div>
<div style="width:100px;height:100px;
  background-color:blue;margin-left:50px;"></div>


By adding any the following properties to the red box, we create a new stacking context for the red box making the red box appear above the blue box.

- display: inline-block
- float
- opacity
- CSS transform
- position (absolute/relative)

For example just by adding opacity:0.999 to the red box, the red box will appear above the blue box.

<div style="height:50px;">
  <div style="width:100px;height:100px;background-color:red;opacity:0.999">
  </div>
</div>
<div style="width:100px;height:100px;
  background-color:blue;margin-left:50px;"></div>


What this means for email

Since CSS properties are not uniformly supported by all email clients we have to apply multiple properties to an element to create a new stacking context depending on the client. For most instances, adding display: inline-block to one element is sufficient to achieve this. However what if both elements already have display: inline-block? You can override that by adding another CSS property such as opacity in Gmail or position:relative in Yahoo! Mail.

Stacking order quirk with scrolling containers in Chrome

There is one peculiar quirk with creating a new stacking order when it comes to containers that contain a scrollbar when it comes to Chrome – display: inline-block does not work as it should. If the blue container contains a scrollbar, applying display: inline-block does not cause the red box to appear above the blue box. In this case we’re forced to use the other properties such as opacity or position.

This Chrome quirk extends to the Android based clients such as Gmail for Android and the Samsung Galaxy client. Safari based browsers including iOS such as Gmail for iOS do not manifest this display: inline-block issue.

New stacking context example

Here’s an example that uses the new stacking context that I built for Email on Acid. This example had an avatar walking through a landscape of monsters.

View the Halloween email here
Read the article explaining the techniques behind the email.



Subscribe to the #EmailGeeks Newsletter

Latest Comments
  1. Shayn Hacker (Yes the last name is real)

    I applied for a front-end developer job and as a test I was asked to create and HTML email template.
    I didn’t think it was going to be so difficult at first but I was very wrong.
    I felt like I had to move heaven and earth.
    The last bottle neck on the design I was given to turn into a HTML email was to get three images that are aligned horizontally to be positioned at the intersection of two larger images. The issue is that three images had the bottom half not showing and z-index isn’t accepted by a lot of email clients despite it working on my localhost/local server.
    The part about opacity worked perfectly and the bottom half of the three images are now showing.
    I wanted to express my thanks for you taking the time to create and publish this article.
    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *