A Comprehensive Guide To CSS Stacking Context

Published On: 23 Aug, 2017

There are some concepts in CSS that are quite intricate and without a clear understanding of them, UI development would be a chaos! What I mean by chaos is that you will end up writing lots of unnecessary CSS code (which unintentionally makes code maintenance costlier in future) and finally you give up, thinking that UI development is not your cup of tea.

But, let me tell you a secret. If you master these concepts correctly, you can seamlessly build beautiful UI components of any complexity level. These concepts will serve as very powerful tools during complex UI development process.

In this blog post, I’m going to discuss two such concepts: Stacking Order and Stacking Context. These concepts help us in understanding the ordering of elements along the imaginary Z-Axis. In my next blog post, I’ll discuss in detail on how CSS Position and Z-index properties play role in ordering the elements. So without further delay, let’s begin!

What is a Stacking Order?

Every element in an HTML document can either be placed in front or behind every other element in the document along the Z-Axis. This ordering of elements is called Stacking Order.

In other words, imagine this system as sorted sheets of paper in descending order based on the sheet number. Here, each sheet corresponds to an element and the number is assigned by the browser based on certain CSS properties (like position, z-index or opacity).

Generally, the elements are laid in the same order in which they are parsed by the browser unless the elements have special CSS properties like position and z-index which influence the stacking order.

In fact, the truth is that, by default, every element has higher Stacking Order compared to previous elements. And the higher the Stacking Order, the closer the element is to us along Z-Axis.

Many of us don’t recognize this behavior. We think that the elements are spread on a single plane like sheets of paper on the table and, since the elements are not overlapped, they are placed in different locations around X-Y plane due to CSS properties like float and display.

But the truth is, you’ll get to know this behavior only if you come across edge cases like providing negative margins to the elements. Take a look at below jsfiddle example.

Here is a list of few CSS properties that influence the Stacking Order

  • The root HTML element.
  • Elements with position attribute value set to “absolute”, “relative” or “fixed” along with z-index value other than “auto”.
  • Elements with “opacity” value less than 1.
  • Elements having “transform” value other than “none”.
  • Elements with “-webkit-overflow-scrolling” value set to “touch”.
  • Background transparency.

What is a Stacking Context?

An element or group of elements with common parent are confined to some specific location along Z-Axis forming a layer. This layer can further contain zero or more child layers forming multi-level layered architecture. This whole system is called as Stacking Context.

Every Stacking Context has a single HTML element as its root element (it could be any element, even the HTML node itself). We can create any number of such contexts for a given web page. Let’s take a look at the below image. There are 3 containers that have formed separate Stacking Contexts and based on their Stacking Order, one of them has overlapped the other.

Stacking Context Representation

Whenever browser finds an element having Stacking Order influenceable properties, always a new Stacking Context is created. Now, whether to put this new Stacking Context inside another or not, depends upon few circumstances as described below.

If the new Stacking Context formed on a child element has atleast one such ancestral element (except HTML root node) with Stacking Order influenceable CSS properties, the child’s Stacking Context is confined within parent’s Stacking Context thus forming a “parent-child” relationship.

In this case, every stacking order calculations performed on child element will be relative to parent’s stacking order (with few exceptions which I’ll discuss in my next blog post).
If the child element upon which the new Stacking Context is formed doesn’t have any such ancestral element which can form a Stacking Context, HTML node is considered as root. I call this as “siblings Stacking Context relationship” because there could be more than one element causing this scenario.

In this case, all Stacking Order calculations are performed based on HTML root node.

That’s all. Hopefully, this blog has helped you in understanding the concepts clearly. But, if you still have any questions or concerns, please put a comment. And yes! Stay tuned for my next blog. Thank you!

Like this blog ? Share it on your favourite social network.
Search powered by Google

Didn’t find what you were looking for? Try here.

Template Monster

Where you can search over 26K+ Premium Templates.

Now, get flat 10% discount by using “b3fbdxkv49mosrt59dsh0dx29” promo-code.

Email NewsLetter

By subscribing, you’ll get access to latest blogs and other resources. Also, whenever there is any new content addition here, you’ll receive those updates directly to your inbox.

NOTE: I’m a strict antispammer. So you don’t have to worry about spams.

This website is designed by keeping modern browsers in mind. Never mind about legacy browsers. It’s high time we upgrade ourselves.

The website and its contents are created, edited and maintained solely by me (Santosh K Shetty). No one else shall possess any kind of resources unless explicitely mentioned.

Some of the Creative Credit goes to FreePik.

Copyright © from Jun 2014 to May 2018

Table  Of  Contents
On this page,