 Welcome back to the CSS podcast. Yes, this season we're doing something a little different and we're answering your most burning CSS questions. We're also recording video, so you get to see us live. Hello, I hope we look like our voice because if we don't, that's really awkward. Yeah, so if you're listening to the podcast, there's really no difference between watching us versus listening. We just wanted to give you some options for how you consume this. But yeah, another thing that we're doing different is not talking about specific APIs or specs, we're talking about things that you might get stuck with when you're trying to write CSS, style your websites. Yep, get your favorite cream out to rub all over these burning questions. We'll still be talking about those modern CSS features and tried and true CSS tips and tricks with a focus on CSS struggles. Adam, do you think I said CSS enough in one sentence? No. CSS, CSS, CSS, CSS, I have energy. I'm ready. So what do you get stuck on? We want you to think of us next time you run into these issues. Where are your issues people now? Yes, we shall be. And let's start with a little scenario. Let's say you want to put a little banner on a card that says it's featured. That's no problem, right? Just position absolute, add some Z-index, but wait a second, it didn't work. The banner floated away to somewhere else on the page. It's not contained in the card and it's awkwardly behind other elements. What could be happening? Yeah, why isn't that Z-index applying that you put on the banner? Well, today's episode is all about the reason that Z-index declarations might not be working. Yep, we got your back because it's also worth noting that in episode 19 of this podcast, we went over Z-index in depth, but today we're debugging it. So we've compiled a short list of reasons that Z-index might not be working. So when you run into the issue, you've got tools to try. So first and the most common reason is that you might be missing position relative. That's the pretty much biggest reason that people are like, why is Z-index working? DIVs are position static by default, so the stacking context isn't the grouping that you might think it is. If stacking context is a new term for you, check out the link in the show description to an MDM page that goes over it in more detail. But basically, it's the isolated grouping which contains position elements, and you need a position for that or some other properties which trigger the stacking context like a transform. Yes, the trap for the absolute position, the cage, the container, the bounds are where left and right and top will reference. It's the window or the whole page, or the nearest parent with a position that is not static. In the card example that Adam was talking about in the beginning, where we have that little banner that we want to place on top of the card, this is the card itself. Add position relative to it, and now when the featured banner goes absolute like we want, it'll appear on top of the card. It'll use the bounds of the card as its edges. And this will also solve that Z-index issue of Z-index not working because you've isolated the element for which it's stacking within, where the stacking context is. So if you have a Z-index of one on the banner, that should now be planning to put the featured element in front of everything else. Yes, I find so often that Z-index one is all that I need. I mean, how many other things are you really trying to compete with? Anyway, so yeah, it's a good idea to try to use the smallest number of Z-index that you can. And you may be tempted after hearing that, you know, you get your card needed, position relative, something that if you want to be contained in here, you might be tempted to put position relative on everything, and some people do. Because this can help you not forget to add it. But this has a pretty particular side effect. It makes every direct parent a stacking context and traps all of its children to it. So this makes an inescapable stack, where no matter where and what your mega Z-index value is that you give the child, it won't ever be in front of anything because its parent is behind something else. Each Z-index value is contextual to the stacking context it's within. And this is likely why your value of 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9 is actually putting your element in front of something or why it's not putting it in front of something. It's trapped within its parents' context, which is probably 0 or 1, and it's behind something else. So a good tip there is position relative on everything might end up making it hard for you to be within the context and stacking in front of other things that you want. So be aware. Yeah, adding more high numbers to your Zindex won't actually help, which I'm sure you've tried, if that's what you're trying to fix. Just add a nine. Add a nine. Add some zeroes. Add some nines. So another reason that your Zindex might not be working is DOM order. And that's the order in which your element appears in the HTML document. So you could have a matching Zindex value. So you have Zindex 1 on two elements. And that sibling might appear in the DOM order after the other one. So it piles it on you. And the last element in the DOM tree, which you can think of as the bottom element in the HTML file, is the element that is topmost. So thinking about your DOM order might resolve any matching Zindex conflicts. You might need to do a Z plus 1 in this case. So you might need a Zindex of 2. Or better yet, use a CSS variable system to organize your Z layers. That'll make your life a lot easier. You won't have to keep adding the nines. Open props has those. They're called layers. And so you can just reference layer 1, layer 2, layer 3. Because it's like, how many layers do you need? But it does have layer important, which is the maximum number. And it's kind of just like a silly joke that it's in there. It's like a nested little Easter egg in open props. It's layer important. And it is the maximum value that it even accepts. And I don't know why you'd use that other than it was important and it felt fun to use. I don't know. Sometimes. I mean, I've also done layers, but it's more been like base, top, topmost. I don't know. I don't remember what I would call them. Yeah, in Visbug, there's like five layers. And they have names too. Because they're kind of like layers of glass, where there's a priority of which things go on top of which things, especially in a global page context. Anyway, OK, we're getting off track. Another reason that you might not be having a Zindex successful moment is a typo. You might have just made a typo somewhere. Maybe you forgot the dash. I don't know. Or another way is that you have too many Zindexes. And this can be like a slippery slope. Like, I remember doing something like Zindex 99. And then the next one, I'd be like, I'll just make that 999. And the next one, I'll just make it another 9. And then all of a sudden, I'm counting 9s. And I'm like, I should have just used 1, 2, 3, 4 instead of 999. So anyway, there's this dance and a whack-a-mole moment that you might have if you're trying to bump up Zindexes in too much of a value each time. So try to keep those at a nice level. 1, 2, 3, 4, 5, 6, 7, 8. If you're going over 10, you probably are doing something wrong. Really cool feature that was just added to Chrome DevTools are the CSS hints, which actually can help you figure out why Zindex isn't working on your page or why any element isn't applying. And it's really handy in this case, too. So we're going to put a link in the show notes for a demo that you can play with yourself, explore it in DevTools, where we have a Zindex that's not being applied. This is Zindex of negative 1. And in DevTools, it's actually just being crossed out. So it looks great. It's crossed out. Now there's a little I icon next to it. And if you hover over that, it tells you that it's because the div is in position static. So it's sort of like a little hint to update that to position relative or give it a stacking context that makes more sense for what you're trying to do. So super useful feature. Definitely check out CSS hints in Chrome DevTools. Yep, good tip. That'll immediately tell you that no parent has position relative. And so you'd be like, oh, that's why Zindex is ineffective. Excellent. All right, well, next is our hot tip section. So we went through a bunch of debugging scenarios, bunch of errors having to do with Zindex. And now we've got tools. So you have these like mentalities and mental models. And now we've got tools. What kind of hot tip? You just mentioned a hot tip, but what's this next one you got going on here? I guess the other one we did talk about a little bit, which is just to use the smallest value possible, because it's very rare that you need something over 10, or honestly even more than one or two, to usually a max for me on like pretty rare occasions for decorative content when I might be like layering pseudo elements on top of each other. So it's really helpful to use a system of custom properties to manage Zindex things so that things don't get out of hand, you're not adding a bunch of zeros or nines. And when you want to add a new layer, that might be an indicator that you should add that to your list of custom properties or your design system for your Zindexes. That way you could see everything very clearly organized. And you don't have to sort of try to remember and manage all of it yourself. And if you don't want to manage it at all, Adam mentioned earlier that OpenProps has a set of pre-set Zindex values that you can use. So you can just use an existing CSS variable-based library and use someone else's naming conventions. People hate naming things. Naming things, stinks. And magic numbers also stink. So like magic number 999, that's a smelly number in your code base. Let's make a plug-in for VS Code where it actually finds smelly numbers and there's like little fumes of stink coming off of them in your code. Yeah, there's also CSS stats or even the CSS overview panel and dev tools that'll show you how many different Zindexes you have and what all of them are, which was useful when I worked at another company and did like a big design system audit, we found that we had, I think it was like 27 different Zindexes being applied. So it was nice to kind of cut those to three. It was like zero, one, two. Very cool. Another hot tip, especially another dev tools one is there's a 3D visualizer tool that you can use to show the stacking context that allows you to tilt the page in 3D and see what's in front of other elements. It's really, really cool. Now you have to know how to use 3D tools, right? So you gotta know like your XYZ gimbal scenario, but it's really neat to tilt it sideways, see the layers of stacking contexts and it can be priceless. So check out that tool if you haven't seen it yet. Yeah, good tip. Another, you know, speaking of 3D things, little interesting trick that I do is on my personal site, I use translate Z of negative one pixel instead of Zindex negative one to place a background behind one of my images and that sounds weird, but the reason that I do this is because the image that I'm talking about is actually a background image. So it's like an empty div and I wanna put a image border behind that and I make like a, it has like a little arch crop that I'm using border radius for. Honestly, now that I'm talking about it, I should probably just make that a foreground image with a clipping mask. But if you're in a pinch and you're trying to layer things behind empty content, you can use this translate Z of negative one pixel trick to do that. Yes, that is a good trick. I've done a trick like that too is like adding a ripple to something. You wanna put it like behind it and allow it to see through. Anyway, there's definitely use cases for negative one Zindex or yeah, cool tip. Yeah, you had one on your site. I mean, it's obviously practical. Here's a tip, a Visbug tip. So there's actually two. I've only mentioned the one here in our notes, but I just remembered another one. So Visbug, the Chrome extension that's open source that I made, it's built on web components, has a Zindex labeling plugin. So the plugins are the little search icon in Visbug. And if you launch Visbug, click on that search icon and type Zindex. It will, and you choose the plugin called Zindex, it will put a Zindex label on everything on the page that has a Zindex that's not zero. And so you can see them visually stacked up in the context of a page. So no 3D tilting, nothing like that. And it can tell you what their values are and you can debug it that way. There's another one though too. I'm trying to remember the name of it. Who cares? It's totally in there. I think it's called, whatever, it uses box shadow. So the higher a Zindex that you have, you'll see more box shadow. And so there's sort of like a shadow type effect that is trying to help you debug those. And then there's also polypane. So if you have polypane installed or if you haven't heard of it before, it's a really great multi-screen testing tool, among other things, it's got a lot of great features. And it has a few Chrome extensions that offer similar features for Zindex labeling. So it can show you and help you debug your Zindexes. Nice. And I guess the last hot tip that I have is if you're futzing around Zindex for something that's supposed to sort of take over the page experience and like layer on top of the page, you could use dialogue with dialogue.showmodal. So you could use the dialogue element and that is really what it's semantically meant for. And opening it with dialogue.showmodal actually puts it into a separate top layer of your page. So top layer is sort of like this special layer that rests on top of the UI and it doesn't interact with other Zindexes on the page layer below it. It's kind of like CSS layers in the fact that they don't overlap when you put it in like another whole layer, but this is actually a layer anyway. You get the top layer promotion when you use dialogue with dialogue.showmodal or when you use the popover attribute for popovers. So popover is landing in Chrome 114 and you can use that to also have this sort of like dialogue, not dialogue, this modal promotion. So you can create dialogues from that or you can make menus or tool tips or other elements in the UI with dialogue. There's like a lot of things you could do there like little toast popups too. And this way you're not fighting with stacking context or with layering with the rest of your page if something needs to be on top of the rest of the stuff in it. So definitely watch out for that. Also popover is in Safari TP. So very excited for that to be landing in browsers. Oh yeah. And that top layer is kind of like DOM order where it's the most recent one to be shown will be on top of any other previous ones that are shown. So. Yes. So you could layer on the top layer if you have like a popover on top of a popover. Which. Yeah dialogues invoking dialogues or popovers invoking popovers is totally plausible, popovers. Yes. Okay, fun fact though. What's the largest C index value you can specify? I don't know. What is it? I wanna struggle to, is this 2 billion? That's 2 billion 147 million 483,647. That sounds really specific. Why is that the largest C index? It's based on the, so like in memory inside of Chromium the data type that they used to store it it's the maximum integers value. So it's just the most that that memory and that type of number can hold in it. That's it. Huh. Well I think that's a perfectly little nerdy fact to end this episode on. Yes. So welcome back to Oliver at CSS Podcast listeners and thank you for joining us. If you have any CSS questions we'd love to answer them on the show just tweet us with the hashtag csspodcast. Yeah, we're actually answering those questions now. So definitely tag us, csspodcast or tweet at me or Adam. I'm Yuna at UNA. And I'm Argyle Inc. A-R-G-Y-L-E-I-N-K. Your question could help a lot of people. And if you like the show please give us a review on whatever podcast app that you're listening on or I guess we're on YouTube now see our faces are here. So please like the video. Maybe we can get one of those cool like like graphics that points down to little like button. But those reviews or those likes they help other people discover our show and they help us get to tell our boss that people like this stuff and want more of it. So please support it with a little heart like whatever it is on your app. Nice, thanks y'all. Looking forward to your thoughts and questions and likes. And we'll see you next time.