CSS Z-Index and Stacking Context
Loading advertisement...
Preload Image
Up next

Creating Growth System X-Particles 4 Infectio

Cancel
Turn Off Light
Auto Next

CSS Z-Index and Stacking Context

While it would be handy (at times) for z-index to be a global value, the truth is, it isn’t. It’s related to its local stacking context, which can be created by a parent with its own z-index value, but also by other properties such as transform, opacity, and many more, which is something most people aren’t aware of.

In this video, I look at what CSS stacking context is, both at how it works with z-index, but also why z-index isn’t the only CSS property which creates a stacking context, and how problems can arise that you might not expect as you style your pages, with an attempt at not just looking at the theory, but how it can can problems in the real world.

MDN stacking context, with full list of properties which create a new stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Codepens:
cdpn.io/f499a49a189cea004da5020a964106b9
cdpn.io/bjEKeq

I have a newsletter! https://www.kevinpowell.co/newsletter

New to Sass, or want to step up your game with it? I’ve got a course just for you: https://www.kevinpowell.co/learn-sass

My Code Editor: VS Code – https://code.visualstudio.com/

How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

Support me on Patreon: https://www.patreon.com/kevinpowell

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

Show More