How it works: Stacking Context/Levels

I’ve decided to sprinkle in my blog ‘How it works’ posts. These posts will break down high level concepts and explain how they work. I was recently asked about stacking context so figured I would start with this topic.

Let me first start by explaining stacking context in simple terms. Lets say you have a 10 story building. The building as a whole would be considered the stacking context and the floors within the building would be considered the stacking levels. You can alter the stacking level by using the ‘z-index’ property. Using this property you can control where the floors sit within the building.

You are probably wondering, ‘Okay got it, but how do I create a stacking context?’. You can establish a stacking context by using any of the following properties on an element (most common).

  • Position: absolute and relative
  • Opacity: when less than 1 e.g. 0.99
  • Filter: any value besides ‘none’
  • Transform: any value besides ‘none’
  • Display: flex and flex-item
Show your support

Clapping shows how much you appreciated Nick Palacios’s story.