 Hi there, my friend and friends. What are my general rules of them with position absolute is to avoid it at all costs, but sometimes we just have to use it. We don't have a choice because we need some overlapping content or you need to get, you know, move something over a little bit and there's safe ways of using it. But a lot of the time it gets a little bit tricky with magic numbers and other stuff. And what I want to do today is look at how you can avoid magic numbers in certain situations. And we're going to look at this card as an example. I did this video a while back, but this part of it was just a really small part of the entire build of all of this, where I needed to get like these red things positioned in the corner. And there's other ways of doing this, but it was sort of an experiment to see if I could do it. And I'll link to the full video down below. But these are all done with pseudo elements. And we'll start with this one right here. So this one's actually going to be this one right here down at the bottom. And like, I want to get it here over the corner. And then if if I didn't use this trick that we're going to look at, I could say that we're going to do like, I don't know, it's top of 100 pixels. And then it's, yeah, it's a that's not too bad, but it needs to be moved up a little bit. Let's I guess it's actually going to be like 90 pixels. Okay, no, that's that's 92 pixels. And okay, there that I would 92 pixels. Okay, I'm happy with that. It's actually I have the box shadow here commented out to cover that bottom bit out. You can see now I perfectly lined it up at that 90. Oh my goodness, that's annoying, but it works. Perfect. Okay, now let's see if we can get this one positioned down in that corner. Well, that one's gonna be a little trickier because now we're going to have to do care. So the top has to be bigger. So we're going to try 145 or 35, I guess, because that's where I went. It looks like it should actually be bigger than that. We'll try 175. Okay, that's looking good. Now let's do a left on there like 50%. Maybe could that actually, it's not quite enough. Okay, so I guess we're I could play with percentages, but that's going to be kind of hard to figure out. So I could come in with like 100. And I'm just going to throw numbers at this and be magic number away there. And you can see that we're we're still off by a little bit and I could get there eventually. We're going to play around with that and get it lined up perfectly. There's a much easier and better way to do this. So when I created this entire layout, if we look at this in my dev tools, I did use grid. I'm not going to focus so much on what I'm looking here. I just want to turn the grid on. And if we're actually if you have a grid on we can go to layout and we can change the color of that. And so let's change that color over to something we can see a little bit easier. That looks a little bit better. The reason I want to do that is because actually you can see now that I'm moving stuff around those absolute values aren't working. I had to use percentages anyway. I wasn't even planning on it breaking like that. But there we go. It's a complete disaster. So I really want to get this to be lined up at that one specific place. And these are pseudo elements like the pseudo element is my house. This is my house image. So I have a div here my house image. So the pseudo the before is like literally right here right my before if I looked in my dev tools we'd see a before here and we'd see our after here. Then that's just like where the in the the DOM this is where they're going to be showing up and often then because they're there what we do is we do a position relative on the house. This house image so directly on the parent to move them in that space. But instead of doing that what I'm going to suggest is you we're going to come up to the house info where I have everything set up. I know my grid just disappeared. So we're going to have to get that back but I'll wait a second because I think being in code pen here it's going to keep turning off. So this house info which is the entire parent of this entire thing this is where the grid is being applied. I want that one to be position relative which if we come and take a look it already is and this is the important one because this has the display grid on it. It's setting everything up and when I want to look at here let's start with this one again which was my house image after I wanted to line up exactly there. So what I can do is to say this is on my grid row and the grid row is starting at one I wanted to end at two so one over two. And that means it's now living inside this row and it cannot escape outside of it even though this is position absolute and just here I have all of them set up with position absolute on all of the pseudo elements. So even though it's position absolute it's now living inside that row because it's containing block is this parent that has grid on it. So now instead of a top and trying to guess where it would be or a bottom and trying to guess where it be. I'm going to say bottom of zero and it lines up exactly at the bottom right where I want it to be. So that's really nice. So now I can come in and I can change this I can say that my corner color should be white so it matches the background color that we had there. And then I can bring my size to a one and now I get that inverted border radius that I wanted right there we can do the same thing on this one over here. So this is going to be in this case I wanted to live inside this cell here so I want to live there. I'm going to say that it's a grid column and it's my line number two to three so we can say two over three and then I have my grid row is a two over three as well. So grid row two over three and then I want it to be a bottom of zero and it will go to the bottom of there and then I also want it to be a left of zero and it will be lined up exactly where I need it to be. Once again we can change the all this copy what we have here just to move a little faster and bring that in right there and these are custom properties. So I usually like having them declared at the top and not the bottom so we can set all that up and then that one's coming into place right there as well. Now we can turn off our grid and we can see that they're lined up exactly in the spots we want them to be grid just makes using position absolute so much easier and so much better. And if you'd like to know more things that you can do with grid I have a lot of grid videos so I'm going to link to a full playlist on those as well as this video right here that looks at two different layouts that work better with grid. And with that I would like to thank my enablers of awesome Johnny Tim Simon Michael James Andrew and TT LLD 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 still a little bit more awesome.