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