 you declare position absolute on something and then you have trouble making it responsive or you change it to position fixed and even though that's always worked for you before you've run into a situation where it's not actually fixed and it's not staying with the viewport like you'd expect it to or you use position sticky and it just, you're a hundred percent sure you've set it up right, you scroll down and it just doesn't stick. When we declare a new position on an element whether it's absolute, sticky, fixed or something else we're changing how this element interacts with those that are around it and with a few of these we're also changing what the containing block is for that element which of course leads to the question what the heck is a containing block? Well, it's actually a pretty fundamental concept of CSS that just rarely ever gets talked about but it also happens to be the key to understanding how to wrangle things when you are changing the position on an element. Hello my friend and friends and welcome back for yet another video and if you're new here, my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and one way we can do that is by diving right into this code and understanding containing blocks and how they impact positioning and all of that good stuff. Now I know you're here because you wanna figure out positioning but first let's just understand what a containing block is by default and then how positioning changes that and how we can control it. So here we have this H3 that's right here it is the name Diana Benson that is right there inside of this yellow box and so the H3 is here and the containing block for it is this div right there because that div is its parent. Seems very simple and it is very simple but there is one more thing that does come into play with this which is what part of the parent is the containing block. So if we pop open my dev tools and we do take a look at the testimonial let's jump over to the computed tab right here and we can see there's different parts of this and you're probably familiar with the box model by default not only is it just that this testimonial div is the containing block but it's the content box of that which makes a lot of intuitive sense it just works you don't have to think about it too much because we have some padding on there which is what's creating the space between my yellow border and the text. Obviously if we add padding we want things to smush in you know we want things to be inside of that padding so everything is laid out inside of that containing block which is the content box of its parent and one thing that's important with this is let's go over to my styles and that's a scroll all the way down and let's select that testimonial right there and what we wanna do is let's give this a width then I'm gonna give it a width of 50% for now just so you can see that it goes to 50% and it's always well what is it going to 50% of and it's going to 50% of not its parent but of its containing block and you might be going Kevin I get this if 50% it goes to 50% of the parent that's fine but we have to think about this a little bit because I often see things where somebody does something like this where they'll do like P and then they need it to be a width or they don't need it to be they just declare width 100% because they know they wanted to take up all the space but then they also come on this paragraph and they say that it has a margin left of like 100 pixels and then they get problems because what's happened is we're saying that the width is 100% of the containing block so it's looking at that content box it's saying my width is now 100% of that size and then we're adding a margin left on top of that and so widths as percentages we do wanna be careful with in general this is over declaring things that you don't need it's a mistake that I do see people often doing where they declare a whole bunch of stuff without seeing if they really need it beforehand they're just like sort of declaring things as they go you know we want an auto on there and auto just means it's going to fit we can do a 50 there whatever it is it means it just sort of figures out the leftover space more or less and of course that's the default so I don't even need to declare it but I just wanted to cover that and just really hammer home that idea because now we're gonna be changing the containing block so let's say I choose my testimonial name here and I wanna do something with it you know what I need to position it a little bit differently I don't like where it is so I do a position absolute on here and when I do that it pulls it out of the flow and I go well actually I wanna move it up a little bit so I do a top of zero on there and it vanishes or it doesn't vanish it goes to the very top of my page and it's actually overlaid with a whole bunch of other texts because we have some more testimonials down below that we're gonna use a little bit later on but so the name is sort of shot up to the top of the page and the reason that's happening is when we declare a position absolute on something we're now pulling it out of the flow but we're also changing what the containing block for that element is and it changes it in more than just one way which we'll see in a second but it's looking for the closest ancestor that has a position on it that's not static which is the default so here is my name right there it's going does this have a position on it no does this have no does this have no body no and then it eventually ends up at your HTML element which is the root of your document and it goes okay well we can't go any further back than that more or less so it's positioned relative to that so that top zero is top zero of my HTML and it goes all the way to the very top of my page now I can choose what I want to be the containing block I could say that this container is the containing block I could say this testimonial is the containing block one thing I could not do is say that this header is the header is a sibling of this container grandparent I guess of my name so we can't move containing blocks into other things like transverse across stuff we have to really rely on nesting and let's look what I mean and this is why I put these borders as inline styles there but let's just say we do this first on my container I could say container position and I can give it any position really but let's just give it a position relative for now and now we can see that this is moved down and it's within the top of this red box rather than the top of the entire page that it was in before and of course we could change this over to testimonial and this is usually what you see people doing right you do testimonial and then it moves and now it's at the top of the testimonial but there is a big difference between the containing block of something position absolute versus what it was originally which was when it was position static and what that big difference is if we come and take a look here again let's actually add a left of zero here as well we have my testimonial here and you'll notice that the name is inside the padding and that's because before we were dealing with the content box so if we go back to the computed we were dealing solely with the content that would fit inside of there and the content box was the containing block once something becomes position absolute and it finds something that is it's containing block it is not looking at the content box anymore it is now looking at the padding box instead and this is regardless if I look at my CSS and we scroll all the way up I do have the box sizing border box on there this has no impact on any of that don't have to declare this if you have it it's the same in every situation now this can make for things that are a little bit annoying one trick for dealing with this is if we give this a say padding of two rem then you want your left here to be two rem and you'd want your top here to be two rem so that way everything sort of falls more in line with the padding that you'd originally set up and if that's the type of situation you do wanna do this could be useful for like my padding of two rem here and then you could set this as a custom property so we could do all three of these at the same time and do a var and do padding there and the advantage with this is when I change this one and hit save it changes all of them or hit save here and it changes all of them so if you do need that positioned element to be sort of relative to the original content box this is one way that we could do it now of course this isn't a very realistic situation but understanding how this works is super important and one of the reasons for that is say let's get rid of all of this so let's go look back over here and I've added this class of testimonial quote here because I wanna add like a decorative quote around this and this is the type of situation where people run into issues with responsiveness when it comes to absolute positioning so what we're gonna do is let's choose that testimonial quote and instead of just doing another quote let's use a before because this works out really well because we can do a content and just say open quote which is super handy and you can actually see that it's showing up there let's say the font size on that's actually like three RAM just to make it really big and maybe the font family is a serif just so it's a bit more decorative and maybe it could even be bigger than that so 10 make it super decorative and of course then what people often do is they say position of absolute and that pulls it out of the flow and then we work really hard at trying to get it into the right spot so the first mistake is when people just do this where they say left say negative one RAM and then oh well okay that's not the right spot so then like 20 RAM I don't know you just magic number it until it can sort of like find the right place and let's say eventually we get to something like this and you're kind of happy with it and you're like awesome I got it but then of course we changed the size of the page a little bit and where did it go and oh that's not good why is it there and then this is the whole idea of the containing block I've positioned this relative to the entire page because I never set a containing block for it and then so one thing we could do is choose which one like what do we want here to be the containing block and then work around that because even though I've positioned this on my paragraph I could make that paragraph the containing block because if we do when you do use pseudo elements if we take a look inside of that paragraph the open quote the before that we have is inside of that so I could choose this paragraph to be the containing block I could choose the container for some reason or anything else that is like you know an ancestor that is further out so if I did it relative to the paragraph then I would just say here that my testimonial quote has the position of relative and again it doesn't have to be relative it's just the one we usually use because it doesn't really change anything and then that just means these numbers could probably be a lot simpler and obviously this isn't perfect but we're sort of getting it like where I wanted to next to there floating around and the nice thing now is as I resize things it's always going to stay within that space because it's locked to the corner based on the testimonial quote itself or maybe I don't actually want it to be relative to this position I want it to be a decorative box that's like hanging over here so sort of looking at the yellow box instead of looking at this paragraph here so then we get to say that the testimonial is position relative instead and it's gonna jump all the way up to there because now this negative three and negative five is locked into this position and it's going to stay responsive if things move around, anything changes it's always going to be locked into that one position so if you are using position absolute focus on what do I want the containing block to be and like 99.9% of the time you don't want it to be the page or the viewport or the root, the HTML, whatever you want it to be linked to a certain element because usually your position is relative to some other component that it is inside of and you can choose which one that's going to be and of course then the nice thing is if you have multiple testimonials those quotation marks are always for each one of them is sort of linked to the positioning of that one now we did run into a small issue because I'm using open quote and we never close the quotes so because we have an open quote that never closes it's doing the inner quotes as single quotes instead of double ones so one way we can actually fix that is to close the quotes so just doing something like that it means that after the paragraph we're actually closing a quote and then we can have open quotes that are normal once again and the nice thing here is having I have three of them but no matter what they're always positioned within the containing block which is the entire thing here even though they're a child of this paragraph and that would even mean if using flex if this got too narrow which I think it will at one point they stack those quotations are following the parent this is perfectly responsive even though I'm using position absolute along the way here now moving on to the next section we're gonna look at position sticky first because it's a little bit simpler even though there's a few weird things that can happen with it and then we'll get to position fixed and the really strange things that can happen with position fixed if you do some stuff because position fixed has a really easy way of working and understanding it with some really weird edge cases but before we get to that let's look here and all I have is this content sidebar parent and then inside of there I have my content and then I have a sidebar here with basically not much in it so this is my sidebar this is my content and with position sticky where it's different so let's just choose that sidebar and we do my position of sticky on there when we use position sticky which means like you should scroll in and then stick in position the containing block doesn't change it's not pulled out it just stays how it was before looking at the content box of its parent so let's do position sticky and let's say a top of zero because I wanted to stick to the top and if I did that right it should stick but it's not sticking why isn't it sticking? and the reason this isn't sticking is let's give it a background color background of we'll just do this one right here so it stands out and oh my goodness it's not sticking because it can't stick because look how big it is and this can happen as a default behavior for flexbox and for grid so part of it is looking at what the containing block is so if we do content sidebar and let's just give that the border like we did before we wanna check to make sure that the parent is actually long and it has something that it can stick inside of because just like the other one it is going to be looking at this content box of this element and it's gonna stick within that but it needs to if its height ends up being really big like we have right here even though it didn't look like it was big it can't stick because well it's filling up all the space so sticking doesn't really work in this case I'm using grid but if you make columns with grid or with flexbox the default behavior for items is to stretch and fill up the height and match the height of the other elements that are there so on my content sidebar itself or even on this we could do and I'm gonna do align items of start and now it's not filling up all the space it's a little item that has a lot of space that it could be inside of that content box so now it's gonna stick and as long as it's inside that content box and then it pushes off because a sticky element will never escape the content box it has to live there but it can stick to the top of the viewport until it gets to the bottom of that content box and then it gets pushed off so sometimes putting, find the content box so like your parent because with position sticky it's always the parent and just put a border on it or something like that so you can visualize where it is and if things aren't sticking the way you want maybe add a background do something on that just to make sure that everything sort of makes sense and you can understand sometimes you want things like show up underneath things and play around you can do really interesting things with position sticky and you really have to understand this relationship with how it works with the parent how its height is and then it can't escape outside of those bounds and it's really living inside of that space to be able to do these cool things that you can actually do with position sticky and as I said that one was the easy one and now we're gonna go to position fixed and what we're going to do for position fixed I think it's a really common example where you have like a scroll to top button that you want stuck at the bottom of your page you also have like the social sharing things that suck but you know let's say I want the scroll to top that brings me all the way up to the top of my page and but I want that to always be at the bottom of my page so here I have this class scroll to top so let's select that and so with that with a position fixed on it now it should be fixed okay well maybe it's because I forgot to put a top of this let's or maybe we'll do bottom this time so I say I want it to be one rem off the bottom of my page all the time wait why isn't it fixed what's going on it should be fixed on the page okay let's go look what's happening here yeah everything looks okay and just quickly before we get to the solution to why this is actually happening I just do want to let you know that this type of sort of under appreciated fundamental concept is a big part of what I cover in my course CSS demystified it's more of an intermediate course that I've put together that covers the why things work the way they do in CSS we look at things like formatting context containing blocks as well as understanding a little bit more about the implications of the cascade how we can take advantage of things like that and inheritance properly why CSS works the way it does to make it less frustrating to write and to help you fall in love with it just a little bit more so if you're interested in that there is a link to the course in the description but now let's get back to this problem at hand that we have right here okay so I'm going to move it out and then we'll explain why if I moved my A outside of the footer and I hit save it's actually going to work now you can see it's scrolling with me and a position fixed element let's go to the default behavior for its containing block the containing block is always the viewport it's not even looking at your HTML element it's not looking at anything in the DOM it's looking at the viewport so when I say bottom one RAM or bottom five RAM or whatever I want it's always going to be positioned relative to the viewport so if you move things around all of that it's moving along with the viewport containing block is the viewport the problem with position fixed is that you generally well generally it always works it just does it you never have to worry about it the problem is there are certain situations like this one that I've created here where I actually created a new containing block for my position fixed element and because it's stuck within this new containing block it's going and that containing block is my footer and I'll explain why in a second because it's the footer it's just sitting it's fixed five RAM from the bottom of my footer the footer doesn't move so you know it's staying within that it's not looking at my viewport it's fixed to my footer now so what would cause something like that and this is where you get into these weird edge cases and hopefully this helps you out because it's one of those things that's a little bit annoying that has a very easy fix but if we look here I put a perspective on my footer and that's because I wanted to change this like rotation here of my name because I was doing something fancy basically I couldn't think of a great example but I'm doing like a 3D rotation on my name maybe you do an animation so you need you know you want a cube that's in there whatever it is you've thrown a perspective on there perspective is one of these weird edge cases that will make that element a containing block for something that has position fixed on it backdrop filter is another one so if you're doing a backdrop filter and you're blurring things behind and for some reason you have a fixed thing that's inside of there it's not on that element itself if something is has the backdrop filter on it like I could add that to my scroll to top here we could do a backdrop backdrop filter of blur I don't know 10 pixels to make it really blurry behind now anything I go on top of if we fix that scrolling by moving it up here now you can see well we can sort of see there we go over the image you can see it's blurred the image that's behind it and maybe I did a little too much so let's just do like a three so I can do that on the element itself but if the parent of the element had a backdrop filter on it then it would get stuck within that space and as I said it's a little bit of a weird edge case you don't run into these very often transforms can also cause this to happen so if you've transformed the parent or if you're using a contain which could come up now that we're using container queries or now that container queries are becoming a thing these are all things that can change how a fixed element behaves and it locks it in rather than the viewport to a different containing block one way that we can easily fix that with position fixed is generally is just move it outside of whatever is causing the problem if something is position fixed it's probably not actually you know the content of it probably isn't really related to the parent because it's following the viewport it's this independent thing that's probably completely separate from everything else on the page so here I have my footer and then I guess semantically speaking it makes sense to have this scroll to top all the way down at the bottom as we get to the end of the page and then I have a scroll at the top here and then with that working I just have that here and then I can click and it brings me all the way back up to the top so hopefully this helps you get around the responsive issues you might have run into with position absolute or any weird edge cases with position fixed and sticky that you might have run into another issue that people do run into a lot is dealing with collapsing margins which is part of formatting context which is another one of those things that you rarely hear talked about even though it's super important it is something that I cover in depth in CSS demystified once again link is in the description or if you'd just like to learn more about collapsing margins which are just one of those behaviors that I wish wasn't part of CSS but it is there and understanding it makes life a lot easier so there is a video on that right here as well that you can check out and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your current internet just a little bit more awesome.