 Hi there my friend and friends. Position absolute is one of those things that is super useful but we need to use it in relation to other elements or it just gets unwieldy. And to explain what I mean by that, I recently had someone ask a question in my discord server that was having some issues with how something was positioned and they would zoom in and out and it would sort of break the layout and that's sort of really annoying when stuff like that happens. So I actually made a video reply to help them out. And along the way we also went into custom properties and how we can sort of use those to do some you know just link things together and make everything a lot simpler as well. I definitely don't make video replies to all the questions in the discord there's a lot of other people who help out in there as well but in this case I thought a video would be the easiest way to help them out so I'm going to be sharing that with you now and if you'd like to join the discord the link to it is in the description. All right so the question is when you place a div over the top of another div using position absolute the position of the element becomes displaced when zooming in or out. And you mentioned I guess you got this from a video since you say in the video, Drew mentions he queries the pixel size and he's using so he has this like pixel size width and height and stuff so I think the first thing here is and this is what we're talking about right like we have this and if we zoom in or out on it like everything stays position properly and I'm guessing I found this over here it's using position absolute for the d-pad but before really breaking that down I think the first thing is to just understand how position absolute works so here's a new I'll make a new code pen here really fast and so let's just do like say we had the game game board or whatever here right and then we have the d-pad d-pad and I'm just we're not going to put anything here just so we can see it I guess and have some content there so game board let's just do this fast game board let's give it a width of 500 pixels a height of 500 pixels and a border so we can see it of five pixels solid and we'll just say black for now and that should give us there's our game board and maybe we'll make this a bit smaller actually 400 and 400 so it there we go just to make it easier to keep on screen then let's come in with our d-pad or you know what let's come first here on the body just because it was centered right so let's say on the body we do a display grid min height 100 vh and a place items of center just so our entire game board moves to the middle and then let's come on the d-pad and I hope I understand the question here and what's going wrong but we'll give this a width of say 50 pixels height of 50 pixels and a we'll give it a let's do background of light green and a border of no five pixels solid dark green I think we have a dark green right there we go perfect and you want to get your d-pad over here so you end up coming and we say that this has a position of absolute on it and then we do a bottom of I don't know 150 pixels let's say and to see where that goes that looks pretty good actually and then we're also going to do a left of 150 pixels because that should give us a left I wanted that to be a right sorry about that um you know it's there maybe this 100 pixels instead and you get it positioned where you want it to be we're going to magic number this into the right spot that looks pretty good but even now like this isn't working right because it's it's we've magic numbered our way there and this isn't positioned relative to the black box it's positioned relative to the entire screen and there's ways we could get that so it's you know this doesn't happen but to me this is where like zooming in and out breaks it um which you mentioned and that's because when I zoom out this is shrinking down but we're still the same distance here of 150 pixels and then the bottom here is still 125 but this is changing in size whereas if I come on my game board and I say this has a position of relative um then here if we zoom in and out it should stay consistent within that placement and now we're just we're way too far off right because we want it to be sort of down there so maybe my bottom now is 20 pixels and my right is 20 pixels and now we're positioned in the right spot there and if I zoom in or zoom out let's say it's always going to be the same distance from that because this position it's looking at the containing block so when I do a position absolute on here the containing block becomes the viewport and then I'm positioning it with the top bottom left and right it's all for the viewport but if I add this position of relative and it doesn't have to be relative this could be absolute on here as well it could be uh sticky it could be fixed as long as the position of this is not static this is the nearest ancestor that has positioning other than static and so this becomes the containing block so when I do my top bottom left and right it's all being positioned relative to that so that's I think the first part of your question that we were looking at so why it stays perfectly placed all the time pretty sure it's from that that's the only thing I can think of anyway so if you if you did that already please let me know the other thing though is you did mention this var pixel size and this negative pixel size that's going on here so I do want to examine that a little bit as well so let's open up the code pen that you were looking at if you're enjoying this video and you found it useful so far we're going to be looking at how we can use and leverage those custom properties as I did mention we'll do that all in one second but first I just wanted to say that if you're enjoying this you'll probably benefit from my course css demystified where I explore concepts that don't get as much attention as they should like containing blocks that we've been looking at now in formatting contexts as well as a lot of other things it's really a course for people who have been writing css they sort of understand the little bits and pieces of it but they're having trouble putting it all together and it also includes taking advantage of custom properties like we're about to see how we can do right now and I did notice we have the pixel size here and what he does is he basically uses you know he changes at different viewport sizes here what the pixel size is so everything can just grow and shrink in relation so this is sort of driving the entire thing right the size of everything is being done through that pixel size that we have right there but if we go down to the d-pad specifically um he's basically just using that to get the d-pad to be positioned correctly based in that board so there's definitely going to be a position um on there somewhere now what I don't see is that negative like here on the d-pad itself he's not using that negative um positioning so let's just do let's look for or I mean this is still the same idea where he's using the calc so he's just saying like if one I want it to be like double one pixel this way and then the bottom two we're doing doubling it and then he's using this um and he's probably using this through it everything right because this is what the pixel size is what's driving his size and then you do times two so like the distance there is two two times what a pixel would be and the distance from the bottom is two times what a pixel would be um and then the size of it's also being driven by that and if we just jump back to your question uh which I can't find there we go uh yeah so we could bring that in oh here it's on corner top left okay I'll find that in this code and we can look at that as well but just by doing a times negative one we're just sort of moving the other way so here let's come in our own code pen that we'd had and let's just come up on it could be in the root it could be on the game board I'll just put it here so I don't need a new selector and this is right pixel size uh I'm going to do five pixels just so it's more noticeable than a smaller number and so here instead of doing like the bottom of 20 pixels and the right of 20 pixels if I do a var and then it was pixel size and then we take that same thing here and we paste it in here we're going to be that pixel size is my distance from the top and the bottom if I zoom in and out it's always going to stay that same way as we had before so it's always just going to be this five pixels but say I wanted to change it I want to go back to the 20 well I know this is five so then I could come here and do a calc and do I need to move this and do it times four because that would give me the 20 and we do the same thing on this one right here paste that in and then we're getting that 20 pixels distance right here and then even for these it probably if this is just to maintain that relationship with everything we'd want to do something similar here but a lot bigger so we could come on my width 400 uh would that be times 20 if my math is any good my size might be wrong here um and then we could do the same thing for two times that's way too small that's gonna be too big no I can't do math whatever we'll just come in with a number here so we have a size right so there's my game board that's being controlled there's my d-pad and they're all relative to this pixel size so if I change my pixel size and make it bigger though everything's going to grow the space here grows because it's all relative the everything is changing so even like here where I had my width and height I'd probably want to change that to use my pixel size as well um and then there is the negative like times negative one where you're using so like this isn't the best example but I'm guessing that might be used like if this is the middle and we want to move something down we could do that with the negative value instead of a positive value so here where my bottom is there if I did this times negative four it's just going to move it down instead of up but it's still keeping that relation to the pixel size that we originally had at the beginning now once again the link to css demystified is in the description just down below and with that I would really like to thank my enablers of awesome Philip Andrew Simon Tim and Johnny as well as all of my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome