Solve your z-index issues | z-index and stacking context explained

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.

Codepens:
---

---

---

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.

[centrumsaiyan]

The moment I realised I haven't fully understand z-index, I immediately came to Youtube and typed 'Z-index kevin powell'. That's how much of trust and respect I have for this man.

[AndHunt]

Kevin, thanks for the explanation of z-index!

P.S. The beginning of the tutorial will have been less confusing if you gave descriptive class names to the boxes (divs) you were stacking. E.g. box-red, box-green, and box-purple will have been easier to keep up with than box-1, box-2, box-3 where we have to try and remember which color was assigned where.

[smerfu]

I was struggling with that for 2 hours straight. Really great tutorials and teaching couch, you make the internet more beautiful man

[abhaykumar]

Thanks a lot for this video. i come back to this video again and again. And everytime it is for a new use-case. This time it was for increasing the z-index of scrollbar thumb for a table content. The concept never gets old.

[TokyoNerd]

I'm in the process of building my own website in which I'd like to eventually use to start my own business. I have no previous experience of using HTML, CSS, or any other form of web coding, so I'm learning everything from scratch as I create the content for my website. I'm looking to create a blog, and I've run into many problems that occur with the z-index, particularly when coding the menu bar. This video has helped me to solve a MAJOR issue with the menu bar. It was an easy-to-understand video and I know have more freedom to build the website that I'm looking to build. Thank you for creating this video.

[MD-ntnv]

Very well explained. Maybe, instead of box-1, box-2, box-3 etc. Try box-red, box-blue, box-orange. I kept going back and forth trying to connect which boxes numbers were which colors. The class names would be more self evident and self explanatory. Thank you for your videos!

[sallaklamhayyen]

I encourage you to continue focusing on misunderstood concepts li Block Formatin Context
Thank you

[rickyu]

This helped me, i had my modal component inside a child div, and was very confused as to why the modal would appear behind other components! stacking context u got me. thanks kev.

[bencetullner]

Actually position fixed and sticky are creating a new stacking context without the z-index (with the <auto> initial value) according to MDN docs.

[likes_to_travel]

Very good example! Thank you! And even as a CSS newb I understood what you were aiming at.
I have 2 problems: When stacking, 1. How do I make text wrap around the stacked item, e.g. an image? Like if your example boxes were bigger and one of them had text inside them?
2. How do I prevent other elements further down on my page from moving up and chiming in on stacking behavior as well?

[life]

Finally, thanks to your video I have understood a problem in my pet project. Thank you, Kevin!

[iliAsghar]

well I'm a bit late to the party, but
THANK YOU
literally the best explanation of stacking .

[katty]

Thank
I've run into this so many times!

[CarAudioInc]

You know you've spent too much time on the internet as an American when hearing 'zed' doesn't faze you anymore lol great vids Kev as always.

[sergey_c]

Thank you for such detailed description with examples!

[cainabel]

Wow, that really made me understand Z-indexes a lot.

[simeongeorgiev]

Thank you so much for helping people like me. Although I read the article in MDN about z-index even before I watched the video and I really thought I understood I found out parts that really I didn't understand! So thanks again <3

[jugibur]

Thanks for your explanations! Helped me alot.
My problem was the stacking context because of positioning an pseudo element *under* the element itself.
Found that decreasing the z-index on a wrapper fixes the problem of the new stacking context:

.wrapper-around-element {
position: relative;
z-index: 0;
}
.element {
position: relative;
z-index: 1;
}
/* Set pseudo element one level down */
.element span::before {
content: "";
position: absolute;
z-index: -1;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 1em;
}

[mdtausifiqbal]

really, this is very helpful video regarding stacking context, and very helpful for beginners like me. very clean understanding after watching this video. Thanks for this video.

[Joe-hjhs]

Can you make a video where the portfolio items would be on top of the overlay as well? I need to figure out how to have the portfolio items stack on top of the overlay. I'm using react components as well which makes the layering of components complicated. Thanks for the video!