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.