Why Isn't Z-Index Working?  ## Metadata - Author: [[Google Chrome Developers]] - Full Title: Why Isn't Z-Index Working? - Category: #articles - Document Note: ## Summarize: The podcast episode delves into the common issue of zIndex not working as expected in CSS and provides valuable tips for debugging and resolving the problem. It emphasizes the importance of using position:relative to create a stacking context for elements with absolute positioning. DOM order and typos in code are identified as potential causes of zIndex conflicts. The episode suggests using a system of custom properties or pre-defined libraries for managing zIndex values efficiently. Additional tools like CSS Hints in Chrome DevTools, 3D Visualizer, and various plugins are highlighted to aid developers in identifying and organizing zIndex issues effectively. ## Bullet Points: - The podcast focuses on addressing the problem of zIndex not working correctly in CSS. - Common reasons for zIndex not working include missing position:relative, incorrect DOM order, and typos in code. - Position:relative is crucial for creating a stacking context, which enables zIndex to function as intended. - Using custom properties or pre-defined libraries can help organize and manage zIndex values efficiently. - CSS Hints in Chrome DevTools, 3D Visualizer, and various plugins like VisBug and Polypaint aid in debugging and visualizing zIndex issues. ## Paraphrase: 1. The hosts of the "CSS Podcast" welcome their audience and introduce a new season where they focus on answering CSS-related questions. They highlight that the episodes will discuss common CSS struggles and tips for resolving them. 2. One of the main topics of the episode is the issue of zIndex not working correctly. The hosts use a scenario where a banner placed on a card using position:absolute is not stacking as expected. They attribute the problem to the missing position:relative, which is necessary to create a stacking context for the banner to appear correctly on the card. 3. They caution against adding position:relative to all elements as it can create an inescapable stack and trap elements behind others. Using the smallest possible zIndex value is recommended, and relying on custom properties or pre-defined libraries can help manage zIndex effectively. 4. The podcast hosts also suggest using helpful tools like CSS Hints in Chrome DevTools and the 3D Visualizer to debug and visualize stacking contexts, as well as plugins like VisBug and Polypaint that aid in identifying and organizing zIndex issues. ## Conclusion: The episode offers valuable insights into resolving zIndex-related issues in CSS. It emphasizes the significance of position:relative for creating stacking contexts, highlights common mistakes like typos and incorrect DOM order, and recommends the use of custom properties or libraries for efficient zIndex management. By utilizing various tools and plugins, developers can effectively debug and visualize zIndex problems in their projects. ## Questions: 1. How can missing position:relative affect the functionality of zIndex in CSS? 2. What are some potential causes of zIndex conflicts in CSS code? 3. How can custom properties or pre-defined libraries be used to manage zIndex values effectively? 4. What are some useful tools and plugins available to aid in debugging and organizing zIndex-related issues? 5. Can you explain the significance of DOM order in relation to zIndex behavior? ## Auto-tagging: CSS, zIndex, position:relative, stacking context, custom properties, Chrome DevTools, 3D Visualizer, VisBug, Polypaint, DOM order, plugins, debugging, custom libraries ## Index Creation: - zIndex: 1-2, custom properties, libraries, DOM order, plugins, 3D Visualizer, VisBug, Polypaint, Chrome DevTools, position:relative, stacking context ## Table of Contents: 1. Introduction: Welcome to the "CSS Podcast" with a focus on answering CSS questions and discussing common struggles. 2. The Issue: Addressing the problem of zIndex not working correctly in CSS and its impact on stacking contexts. 3. Common Reasons: Identifying missing position:relative, typos, and incorrect DOM order as potential causes of zIndex conflicts. 4. Efficient Management: Tips for managing zIndex values using custom properties or pre-defined libraries. 5. Helpful Tools: Utilizing CSS Hints, 3D Visualizer, VisBug, and Polypaint to debug and visualize zIndex issues. 6. Conclusion: Recap of insights and recommendations for resolving zIndex-related problems in CSS. ## References: - "CSS Podcast" Episode [Link] - Mozilla Developer Network (MDN) article on stacking contexts [Link] - Open Props CSS variable-based library [Link] - CSS Stats [Link] - Chrome DevTools CSS Hints [Link] - VisBug Chrome extension [Link] - Polypaint multi-screen testing tool [Link] ## Future Research: - Investigate further the impact of adding position:relative to all elements and its potential implications on stacking contexts. - Conduct a study on the effectiveness of using custom properties or predefined libraries for managing zIndex values in large-scale projects. - Explore different CSS tools and plugins that aid in debugging and visualizing zIndex issues to determine their usability and effectiveness in real-world scenarios. ## Hypotheses: 1. Hypothesis: Adding position:relative to an element creates a stacking context, enabling zIndex to function as intended. 2. Hypothesis: Using custom properties or predefined libraries for zIndex management reduces the likelihood of conflicts and improves code organization. 3. Hypothesis: CSS Hints in Chrome DevTools and other debugging tools enhance developers' ability to identify and resolve zIndex-related issues efficiently. ## Methodology: 1. Conduct a controlled experiment comparing the behavior of elements with and without position:relative to assess the impact on zIndex functionality. 2. Analyze projects with varying degrees of complexity to evaluate the effectiveness of custom properties and predefined libraries for zIndex management. 3. Administer user surveys to gauge developers' experiences and satisfaction with CSS Hints, 3D Visualizer, VisBug, and Polypaint for debugging zIndex issues. ## Implications: - The insights and tips provided in the episode can advance developers' knowledge and proficiency in CSS, leading to better-designed and more functional web applications. - Utilizing efficient zIndex management techniques and tools can streamline development processes, saving time and resources. - Improved debugging capabilities through CSS Hints, 3D Visualizer, VisBug, and Polypaint can enhance code quality and improve user experiences on web pages. ## Logical Validity: The main arguments and supporting evidence presented in the podcast are logically coherent and relevant to the topic of zIndex issues in CSS. The hosts provide practical examples and offer various tools and techniques to address the problem effectively. No logical fallacies are apparent in the presented content, and the information is valuable for developers seeking to resolve zIndex-related challenges in their projects. The CSS Podcast is back with a new season, answering burning CSS questions and discussing common struggles with CSS. [00:03](https://www.youtube.com/watch?v=QGd1xdxkU58&t=3) The podcast is focusing on answering CSS questions and providing CSS tips and tricks. [02:10](https://www.youtube.com/watch?v=QGd1xdxkU58&t=130) Elements need a position to trigger the stacking context for zIndex to work. [04:27](https://www.youtube.com/watch?v=QGd1xdxkU58&t=267) Understanding how z-index works is crucial for controlling element stacking in CSS. [06:19](https://www.youtube.com/watch?v=QGd1xdxkU58&t=379) Z-index issues can occur due to incorrect priorities or typos. [08:12](https://www.youtube.com/watch?v=QGd1xdxkU58&t=492) Use the smallest value possible for zIndex. [10:20](https://www.youtube.com/watch?v=QGd1xdxkU58&t=620) Use a tool to show stacking contexts and tilt the page in 3D [12:24](https://www.youtube.com/watch?v=QGd1xdxkU58&t=744) There are tools like Polypaint and dialog.showModal that help with debugging zIndex and creating top layers in the UI. [14:40](https://www.youtube.com/watch?v=QGd1xdxkU58&t=880) Popovers invoking popovers is possible --------------------------------- Detai - Document Tags: [[CSS]] - Summary: This content is a transcript of a CSS podcast where the hosts discuss common issues with the CSS property zIndex. They provide tips and tricks for troubleshooting zIndex problems, such as adding position:relative to create a stacking context, considering DOM order, and avoiding typos or excessive zIndex values. They also mention tools like Chrome DevTools CSS Hints and 3D Visualizer for debugging and visualizing stacking contexts. The hosts recommend using a system of custom properties or existing CSS variable-based libraries to organize zIndex values effectively. - URL: https://www.youtube.com/watch?v=QGd1xdxkU58&list=PLNYkxOF6rcIAx_S2LSfXQLorIeehsPL3q&index=1&ab_channel=GoogleChromeDevelopers UNA KRAVETS: 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! ADAM ARGYLE: Hello, I hope we look like our voice because if we don't, that's really awkward. UNA KRAVETS: 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. But we're talking about things that you might get stuck with when you're trying to write CSS, style your websites. ADAM ARGYLE: Yeah, get your favorite cream out to rub all over these burning questions. UNA KRAVETS: 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? ADAM ARGYLE: No, three more times, CSS, CSS, CSS, CSS! I have energy. I'm ready! UNA KRAVETS: So what do you get stuck on? We want you to think of us next time you run into these issues. We're your issues people now. ADAM ARGYLE: Yes, we are. 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 zIndex. 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? UNA KRAVETS: Yeah, why isn't that zIndex applying that you put on the banner? Well, today's episode is all about the reason that zIndex declarations might not be working. ADAM ARGYLE: Yep, we got your back because it's also worth noting that in episode 19 of this podcast, we went over zIndex in depth. But today, we're debugging it. So we've compiled a short list of reasons that zIndex might not be working. So when you run into the issue, you've got tools to try. UNA KRAVETS: 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 isn't my zIndex working? Divs are positioned 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 MDM page that goes over it in more detail. But basically, it's the isolated grouping which contains positioned elements. And you need a position for that or some other properties which trigger the stacking context, like a transform. ADAM ARGYLE: Yes, the trap for the absolute position, the cage, the container, the bounds, where left and right and top will reference. It's the window or the whole page, well, or the nearest parent with a position that is not static. UNA KRAVETS: 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 at 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 balance of the card as its edges. And this will also solve that zIndex issue of zIndex not working because you've isolated the element for which it's stacking within, where the stacking context is. So if you have a zIndex of 1 on the banner, that should now be plenty to put the featured element in front of everything else. ADAM ARGYLE: Yes, I find so often that zIndex 1 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 zIndex that you can. And you may be tempted after hearing that you got, this 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 zIndex value is that you give the child, it won't ever be in front of anything because its parent is behind something else. Each zIndex value is contextual to the stacking context it's within. And this is likely why your value of 9999999999999 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 parent's 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, beware. UNA KRAVETS: 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. ADAM ARGYLE: Just add a 9. Add a 9. UNA KRAVETS: Yeah, add some 0's. Add some 9's. 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 and 2 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 will make your life a lot easier. You won't have to keep adding the 9's. ADAM ARGYLE: 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. UNA KRAVETS: Sometimes, I mean, I've also done layers. But it's more been, like, base, top, top most. I don't know, I don't remember what I would call them, but. ADAM ARGYLE: Yeah, in VisBug, there's five layers. And they have names, too. There's-- 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, oh, I'll just make that 999. And the next one, I would be like, I'll just make it another 9. And then all of a sudden, I'm counting nines. And I'm like, I should have just used 1, 2, 3, 4 instead of 9, 99. 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 of 1, 2, 3, 4, 5, 6, 7, 8, 9. If you're going over 10, you probably are doing something wrong. UNA KRAVETS: A 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. It's a zIndex of negative 1. And in DevTools, it's actually just being crossed out. So it looks gray. And it's crossed out. But now, there's a little eye 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 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. ADAM ARGYLE: 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, a bunch of errors having to do with zIndex. And now, we've got tools. So you have these mentalities and mental models. And now we got tools. What kind of hot tip-- you just mentioned a hot tip. But what's this next one you got going on? UNA KRAVETS: Yeah, a hot tip. 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 1 or 2. 2 would be a max for me on pretty rare occasions for decorative content, when I might be layering pseudo elements on top of each other. So it's really helpful to use a system of custom properties to manage your zIndex things so that things don't get out of hand. You're not adding a bunch of 0's or 9's. 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 can see everything very clearly organized. And you don't have to try to remember and manage all of it yourself. And if you don't want to manage it at all, Adam mentioned earlier that Open Props has a set of preset 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. ADAM ARGYLE: Naming things stinks. And you know, magic numbers also stink. So like, magic number 999, that's a smelly number in your code base. UNA KRAVETS: Yeah. ADAM ARGYLE: Let's make a plug-in for VS Code, where it actually finds smelly numbers. And there's little fumes of stink coming off of them in your code. UNA KRAVETS: Yeah, there's also CSS Stats, or even the CSS Overview panel in DevTools 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 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 cut those to three. It was like, 0, 1, and 2. ADAM ARGYLE: Very cool. Another hot tip, especially other DevTools one, is there's a 3D Visualizer tool that you can use to show the stacking contexts. It allows you to tilt the page in 3D and see what's in front of other elements. It's really, really cool. You have to know how to use 3D tools, right? So you got to know your x, y, z 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. UNA KRAVETS: Yeah, good tip. Another, speaking of 3D things, a little interesting trick that I do is on my personal site, I use translateZ of negative 1 pixel instead of zIndex negative 1 to place a background behind one of my images. And that sounds weird. But the reason 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 want to put an image border behind that. And I make-- it has 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 translateZ of negative 1 pixel trick to do that. ADAM ARGYLE: Yes, that is a good trick. I've done a trick like that, too, with adding a ripple to something. You want to put it behind it and allow it to see through. Anyway, there's definitely use cases for negative 1 zIndex, or-- yeah, cool tip. Yeah, you have it 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, it 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 and you choose the plug-in called zIndex, it will put a zIndex label on everything on the page that has a zIndex that's not 0. And so you can see them visually stacked up in the context of your 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 zIndex that you have, you'll see more box shadow. And so there's sort of a shadow-type effect that's trying to help you debug those. And then there's also Polypaint. So if you have Polypaint 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. UNA KRAVETS: Nice. And I guess the last hot tip that I have is if you're futzing around zIndex for something that's supposed to take over the page experience and layer on top of the page, you could use dialog with dialog.showModal. So you could use the dialog element. And that is really what it's semantically meant for. And opening it with dialog.showModal actually puts it into a separate top layer of your page. So top layer is sort of this special layer that rests on top of the UI. And it doesn't interact with other zIndexes on the page layered below it. So it's kind of like CSS layers in the fact that they don't overlap when you put it in another whole layer. But this is actually a layer. Anyway, you get the top layer promotion when you use dialog with dialog.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 dialog-- not dialog, this modal promotion. So you can create dialogs from that, or you can make menus or tool tips or other elements in the UI with dialog. There's a lot of things you could do there, like little toast pop-ups, 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. ADAM ARGYLE: Oh, yeah, and that top layer is kind of DOM order, where the most recent one to be shown will be on top of any other previous ones that are shown. So-- UNA KRAVETS: Yes, so you could layer on the top layer if you have a popover on top of a popover, which-- ADAM ARGYLE: Yeah, dialogs invoking dialogs. Or popovers invoking popovers is totally plausible-- plausible popovers. UNA KRAVETS: Yes. ADAM ARGYLE: OK, fun fact, though, what's the largest zIndex value you can specify? UNA KRAVETS: I don't know. What is it? ADAM ARGYLE: I struggled. Is this two billion? That's 2,147,483,647. UNA KRAVETS: That sounds really specific. Why is that the largest zIndex? ADAM ARGYLE: It's based on the-- so in memory, instead of Chromium, the data type that they use to store it, it's the maximum integer value. So it's just the most that memory and that type of number can hold in it. That's it! UNA KRAVETS: Well, I think that's a-- perfectly little nerdy fact to end this episode on. ADAM ARGYLE: Yes. UNA KRAVETS: So welcome back to all of our "CSS Podcast" listeners. And thank you for joining us. ADAM ARGYLE: If you have any questions, we'd love to answer them on the show. Just tweet us with the hashtag, CSSPodcast. UNA KRAVETS: Yeah, we're actually answering those questions now. So definitely tag us, CSSPodcast, or tweet at me or Adam. I'm Una, @una. ADAM ARGYLE: And I'm argyleink, A-R-G-Y-L-E-I-N-K. And your question could help a lot of people. UNA KRAVETS: 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 graphics that points down to the 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 with a little heart, like, whatever it is on your app. ADAM ARGYLE: Nice. Thanks, y'all. Looking forward to your thoughts and questions and likes. UNA KRAVETS: And we'll see you next time. [MUSIC PLAYING], Why Isn't Z-Index Working?, Google Chrome Developers, 01h6xn46ajmvvz20j6h58a10s2.