 Oh, they're my friend and friends. There's a few things in CSS that I like to call the unknown fundamentals, which are parts of CSS that we really should know and talk more about, but often go under the radar and people often don't hear about them. And recently, Kylian updated his polypane browser to help highlight these because they're actually kind of hard to see in the dev tool. So he's added the functionality to see the offset parent as well as some stacking context information as well that makes just really easy to find. So he joined me to sort of explore how we can find those things within polypane. And then of course, we go into the details of what they are, how they impact how we should be authoring our CSS and all of that. So let's dive right into it. So here we are in polypane with a very simple example that I've set up here. So we're going to be diving into looking at the offset parent and stacking context and the visualizations or the extra information that polypane can give us that we don't get from our regular browsers. I'm going to push alt on my keyboard. And when we're in polypane, the cool thing with that is we can get the visualizations right away, which I really like. And just as a quick example or a quick look at the structure here that we have, we're going to be mostly looking at this paragraph, we'll play around with some other stuff along the way. We have the content around that, which is the white box. And we have a lighter gray box around the outside that's going to be our parent here. And all of that's directly in our body as you'd expect it to be. So we have sort of some layering of content going on right now. And as you can see, these dev tools do look a little bit different. Though there's a lot of familiar things in here. There might be a few things that you're not used to seeing, like the paragraph with the contrast ratios and other stuff. So just really fast, Kylian, can you explain a little bit of what we're looking at here? Yeah, sure. So these are the, is the elements panel for polypane, which are built for a couple of reasons. So the primary one is that polypane can show your website in multiple screen sizes at the same time. But Chromium doesn't know that. So the Chromium dev tools can only really interact with one single webpage at the time. So I built the polypane elements panel where you can edit all sizes in one go. And then whilst doing that, I figured out, you know, why not add a bunch of stuff that I need to look up all the time or that I need to do all the time and just sort of create a new design for the elements panel that has a bunch of stuff much more easily accessible. So for example, here in the dev tools elements, if you want to edit some text, you need to go into the tree view and then double click. And then it's like a modal selection. So you can't click out of it. And you can't really type or see what you're typing as you're typing it because it's so small. So one of the things that the elements panel does is it just gives you a content box. And then as you type in that context box, you can see that it's applied across all the sizes. And that's very nice because then you can play around with your content and immediately see if it works on all the screen sizes and like that it doesn't break on mobile or that it cuts off weird or whatever. So there's a bunch of these things that I'm adding here for stuff that you're probably constantly looking up. For example, the contrast ratio is right there. The rendered font is right there. So you're not like searching three levels deep. Like is this rendering in the right fonts? I think it is, but you know, fonts can look the same. And this way you just get the information right away without having to do a lot of work. Yeah. And because you did all that, as you said, you've been able, you know, we have the extra information or easier to access information because a lot of this we could get from the actual dev tools, but you sort of have to dig around to find it. Whereas in this case, it's much easier to find. And you've also added a few new things that we're going to be using today to understand offset parents and stacking context a little bit better. So where can I find that? Yeah. So right at the bottom of the elements panel, you have a bunch of options like the style panel that you're used to from the regular DevTools, which lets you edit all the styles computed. And then the one we're looking at today is called debug. So debug is one that I added in the most recent version, Polypane 14. And the whole idea for this panel is if you're running into layout issues or display issues, the one thing you're always doing is looking up like a few different properties of an element, like what's the display? Oh, I forgot to set a position and it's still static, things like that. Instead of having to look through all your styling in the style pane, like where did I set a position at all? Where is it that takes a lot of time? So I just put them all together in the debug panel. So you can like in one overview, see why isn't something looking or working the way I think it should work is what we're discussing today, which is the context in which an element lives. So that would be the offset parent and the stacking context. So stacking context is whether or not the element itself is a stacking context. And then an element always has a stacking context parent because the HTML is always a stacking context by spec, but an element behaves different if it is a stacking context. So the second context is whether or not this element starts a stacking context. Perfect. And the other is in which stacking context does it live? So yeah, we'll dive in and take a look starting with the offset parent. And this is actually something that I've always found funny that we don't hear more about. And I sort of call it one of the the unknown fundamentals of CSS because it's it is a fundamental concept. We use it anytime you use positioning, you're using it in one way or another, but you're just not aware of it. So what we'll do is let's jump on over to VS code just for a second here, where we have my body, my parent and the paragraph here. And we also have that container. So you know what, I'm going to start or we'll start with the parent actually. And let's do a position or I'm jumping ahead. We're going to just start right on this paragraph. And we're going to do a position of absolute done there. And when I do that, if we go back on over to polypane, we can see things have changed around a little bit. So you want to explain what's just happened here or what information we can get from polypane to understand what's happening. Yeah, sure. So if you scroll up in the debug panel, then you can now see that the position has changed to absolute. So we know it's absolutely positioned. And then the question is like, what is it absolutely positioned from? As we can see now that the content around it has collapsed is when you take an element and you give it a position absolute, it actually gets taken out of the parent element. It doesn't count towards the size of a parent element anymore the way other position relative and position static queue. Then what we want to figure out here is why does it get placed where it's being placed right now? So right now this paragraph, we didn't supply it like a top and a left and or a bottom or right value. So what the browser tries to do is actually position it in the place where it's started or initialized, which is at the top of the parent element. And then because the parent element collapses, that's being brought back to the center. So if we do come and I hear, like you said, because we haven't given it anything, let's say we do a top of 10 pixels and a left of 10 pixels, just so it actually has values there. We can say it's completely changed where it's positioned. And I think this is where it becomes useful, because now we can really see where it's getting positioned to when we come down to here with the offset parent seeing that it's actually the body right there. And this is one of those things where in a situation like this, we're doing a silly little demo, we know exactly what it's being positioned to, but sometimes when you're in a more complex setup where you have a lot of moving parts on it, you might have a position relative somewhere or something like that that you didn't realize. And that's one of the things that changes the offset parent. So if we jump back on over to VS code here really fast, and let's just go on this parent, and I do a position relative, like I just said, and that's always sort of that combo that you're doing, where you have a position relative somewhere, and then the absolute somewhere. And the reason you're doing that is because you're defining this offset parent. I think that's the thing, like people do this all the time, but don't really realize that it's like, oh, now it's relative to that instead of my body or whatever. So now we can see it's moved on over and is set up exactly, you know, it's 10 pixels from the top, and it's moved on over a little bit from the side there. And if I come and look in polypane, we should be able to see now the offset parent there, we can see, oh, and I didn't even realize this, if you hover over, it highlights what the parent is, which is kind of cool too. So it makes it easy to find what you're looking for, which is always great, because one of the things I always get annoyed with in the DevTools is sort of hunting for that element to find out exactly what's going on. So that's useful. In terms of right now, I use position absolute and position relative. So just really fast anything, if we come back in VS code, position relative, if you want to create a new offset parent, it's basically anything that's not a position of static. So once you change the position, then you're creating this. So sometimes you don't even realize it, maybe you're using position fixed on a navigation, something like that, and you're chain, you have something that's nested inside of there, drop down menus or something else, a lot of the time that ends up being more useful than not useful, but just a few things that you might want to watch out for along the way. The other one example actually here that I wanted to look at is if we change the, I had the parent, and then I also had the dot contain content. And I'm just going to do a position of relative on that one as well. So we're actually going to change where it's positioned. But the one thing that's really important to understand when we're looking at these is, actually, we'll do this through the DevTools down here, where if I change, if I just take this position absolute off for a minute, we can see that there's a lot of padding that's on here. So when an element doesn't have positioning on it, it's offset parent, like it's looking at the padding box of this content right now, right? So it's, and that's normal, you add padding, you're expecting the elements to move in. And one misconception or one thing that people don't always realize is when you do something like doing a position of absolute is now that top and left property, they're relative to the actual padding box now. So like the edge there and not for that padding that it was originally placed within. So like one of the things that, that I think trips people up is the naming, because you set an element to position relative to make it an offset parent. And then you set a child elements position absolute to relatively position it from the parent element. So it's very easy to confuse that naming, especially if you're just starting out, because it doesn't really make sense. Like you're very explicitly positioning something relative to something else. But that's not what position relative does. That's what position absolute does. So that's one thing to keep in mind. Okay, so the next thing we're going to do is look at sort of maybe a slightly more realistic situation for this as well as how we could pull stacking context into this as well. So in the HTML here, I just switched to my paragraph out, almost done it all. We need a closing block quote to go with it. But we have a block quote here. And we're just using a span to make it a little bit easier to work with, with an open quote in there, just decorative open quote at the beginning of what we have right there. And if we come and take a look at what that's giving us are actually I'm going to style the span right away, because I have some styles to put on that to make it really big, which is often what we want. It's sort of this decorative thing. But the problem is that gives us something like this to start with, which doesn't look very fantastic. So often what we do is on the block quote, I'll come in first with a position of absolute. And when we do that, we end up with something like that that isn't looking fantastic, fantastic, but we can sort of improve this. And I think I'll do this through the dev tools just so we can see it moving around in everything. And one thing here, if you are using some of the things over here within polypane, Killian was nice enough to let me know we can hide the box model if you don't want it to give yourself a little bit more space to work with. So the first thing we're going to see here is what we've already looked at our quote is position absolute. So we can see that the offset parent right now is the content because we'd set that up earlier when we're moving our the red box around on that span. If I come, I can just come over to the style over here, like we're used to doing. And I'm just going to set a top of zero, and we'll also set a left of zero. And then it's when I quickly realize that Oh, I made a mistake along the way here, because I actually want it to sort of be covering the red text that's there. So going over to the debug, I can see the offset parent is my content. And I actually want it to be that red box instead. So on the block quote, we could come in and just give that a position of relative. So then we can sort of fix how that's getting set up. This is actually one problem you'll see a lot when you do these, I always run into this issue. Because when you increase the font size a lot to make these decorative, they become gigantic. So do use your dev tools, whatever DevTools you're using. It's just nice to visualize that like, Oh, this is taking up a lot more room than I was expecting it to. So it can be hard to position just top and left in general. So what we could do to help with that is just do a line height of would zero be enough? It would. So with the line height of zero, if I come and take a look, or zero might even be a bit too small. One would probably be a bit more practical. So it's sort of getting into a bit more of a realistic realm of what you might have there. And you know what? I'm going to make this really big and just sort of play around a little bit, maybe just something like that. It's not perfect. But it's this idea that you're bringing this, this element to be decorative to show that it's a quote. And then you run into the problem that it's covering your text. And you can't read the text. And it's supposed to be this little decor subtle decoration in the background. And that's where we enter the realm of Z index and stacking context, which isn't controlled by by our, the one we were just looking at the offset parent. And I think that's something that trips people up where they think they did a position relative on something. So right now where the offset parent is the content, but the stacking context parent is still over here. So what that means is on my span that I created, if we come on that and I give that a Z index negative one, it disappears. And it's gone because it's it's just left and it's gone behind everything. Because it's it's going to be the last thing in this 3d realm that we've just created effectively. So the best way to find that now is if we go to the debug, we can see stacking context is HTML. So we're not Z index, we're not in this 3d realm based on any of the other things here. So the negative one is just going all the way back. So knowing that I can sort of decide where I want a new stacking context to start. And I always have trouble explaining stacking context to a certain degree. Do you have a succinct explanation of what it is by any chance? As you alluded to a couple of times. So stacking context is like the offset parent. So it determines where things get placed, but where things get placed in like the three, the third dimension, like far away or close to you. And by default, your HTML is the stacking context. So you can you can position all elements in any order you want. By adding a stacking context to an element, you say actually every element inside this element can only be positioned in 3d. So in in the third dimension from me. So they can't go behind me or behind this element, but they can still within this element decide which place they take. Yeah, that's good. And this is I think one thing that gets people. So let's fix that first. So I can say I want my you know, I need this to be with my block quote, but I only want it to be behind the block quote and nothing else. So that means I want to turn my block quote into a new stacking context. For a long time, stacking context was this weird thing where you sort of had to throw somewhat arbitrary properties to create them. We already have a position relative on the block quote. So the common thing was have a position relative and then add a zed index on that as well. So if I did a zed index of just one on there, all of a sudden it fixes that because now if we come and look in the debug menu, stacking context, yes, meaning that this block quote is creating a new stacking context. So that was always the sort of the default way of creating them, I think, but there's also some other properties that do create stacking context. And I think that this could also be useful for finding those times when you're creating one and not realizing it just because you use like a transform or something like that. And lowering opacity and I don't remember all of them, but there's a handful of them. And the one I like to look the one I do these days a lot is instead of having to do two properties, you can also use isolation, which is part of the blending mode spec, I think, isolation isolate, which, whoops, isolation, isolate. And that also creates a new stacking context as well. So, oh, did it change? Oh, because I took off the position relative. There we go. So yeah, the isolation isolate is for me a sort of a quick win on creating stacking context that I use. That's I think its only purpose is to create a stacking context. So it can also affect how mixed blend mode works. So like how far back into the DOM tree it blends. But it is very nice if you do use isolation, then it becomes a very explicit way of saying like, this is a new stacking context. Whereas with a Z-index, you better add a comment if you're doing it for a stacking context rather than, you know, just general placement because that's not very explicit. Yeah, definitely. So yeah, if we come back to that debug menu, we can see it is or if we go in the span, we can see now that the stacking context is the block quote as well as the offset parent because it's doing both. One is for positioning. And the second one here is for where it is stacking on the page. So I hope you enjoyed that and learned a couple of things along the way. And if you're interested in trying polypane, there is a link down below. It is a paid product, but you can try it for free. And the link down below is an affiliate link. So if you decide to use it, then you will be supporting this channel as well. And with that, I would like to thank my neighbors of awesome Bailey, Andrew, James, Michael, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.