 One thing I've noticed is a lot of people really struggle with using position absolute when it comes to making responsive designs. And of course, we need to make everything responsive and position absolute, maybe the first thing is maybe don't use it if you can avoid it, but sometimes it is the better solution or sometimes you're stuck having to use it. And in those cases, it can be frustrating when you feel like you're just throwing magic and now you have to guess at every number and then you resize the page and it's not really flowing the way you'd expect it to and you're using percentages and maybe it's not, things aren't lining up the way you'd want. So in today's video, I'm gonna be taking a look at part of this front-end mentor project that you can see on the screen right now and we're gonna be focused on these two credit cards because this is something I've seen a few people trying to do with position absolute where we could actually use grid probably to lay them out but position absolute works well for them and it's less so of getting the layout like this but it's more so the logo here, the text, each piece here is a separate element on top of a background. And so to be able to do that, position absolute can actually work pretty well and you can make it perfectly responsive as long as you take the right approach to doing it. So in this video, we're gonna use this project to look at how we can use position absolute and still have things be perfectly responsive. Hello, my front-end friends. Thank you so much for coming to join me once again. And if you're new here, my name is Kevin and here at my channel, I help you fall madly in love with CSS and if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it and today we're gonna be doing that by taking a look at position absolute and how we can make sure that it does stay responsive and we're gonna jump into the code now and you can see I'm not starting with very much. I have a basic starter template here. I've linked to the Google Fonts for this project and I've set up the colors as custom properties in my CSS and that's about all I've really done and I have this content grid that is right here. And so for the content grid, my idea here is I just want something that's gonna hold my content and make it two columns. I'm not gonna go into the code that's for that because I really just wanna focus on these guys and the whole position absolute thing, but my finished code will be linked down below so if you wanna see how that content grid works, you can also check that out at your own time. But in here, we're gonna need two things and we need two things. We need something for the cards, we need something for the form so then we can actually focus on the cards. So to be able to do that, and we're gonna have my card previews which is going to be the div here that I have the two cards in it and then over here, we can just have a placeholder for the form and here is what that is giving us where I'm using grids, we got like two equal sections here and if we go look at the CSS, I have put a border on the two elements there just so we can see them and see the space that we're gonna be working with and you have two columns that are coming there that we'll worry about a little bit later and the reason I have them stacking is well, we've looked at one design, we also have the mobile design like this where we need the card sort of overlapping and it's gonna be another exploration where we're gonna look at sort of the inside of them but we're also gonna look at the outside and how we can handle those as well. But of course we need the cards to actually be in there and so I just have a card front and a card back that are gonna be right here, nice and simple, nothing too fancy and of course we need the different things that are actually going to be in there and this is where there's a really important thing when it comes to position absolute that you sort of need to decide at one point because we have these images here and even the back, like even the card here and the background gradient thing here, those are images and I could set those as background images. The problem with the background images it doesn't actually take up any space and when we use position absolute we always wanna have it like a space that that thing can live in and if we don't have a defined space for it that's the first thing that can make life more difficult because then you're working within like the zero height div or something like that and that just makes life a little bit harder to function but we do need to place all of these things in here so you can see I have an image, I have the image for my card front, my logo and then I have the text here just all in spans and then we can do the same thing. We have the card background as well as this right here and I am specifically using the card front BG and the card back BG here as actual images instead of having them as background images just so they're gonna actually define what my space is and those we'll see how we're gonna do that but for me it's really important that these actually get defined as actual items. The other thing is right now we can't see it but I do have the logo floating around here somewhere but it is white so just really fast. I have a variable here. We're gonna turn on dark mode for a second. There we go, just so we can see that the logo is there and we'll leave it in dark mode for now because it's easier on the eyes and I like it better and we can always switch it back after but yeah, I'm just really important for how I'm doing this. Different situations will have different things. Sometimes you'll have other content and then one item in there that's position absolute. That's fine. As long as you have some content that's defining the size that you're working with. That's the first thing you wanna have. So card front has a whole bunch of content in it but anyway, I'll show you what I'm talking about. It'll be a little bit easier. So to better illustrate and this is something I always tell people when they're, if you're newer to CSS and doing things it's a bit of a different mental model in general and it's a lot easier when you can see the spaces you're working with so putting backgrounds or borders on things to help visualize what you're working with is always a nice first step. So yeah, there we can see I have these green borders now that are coming on these so I can visualize the space that I'm working with and what I wanna do we do wanna be using position absolute but as I said, we wanna be a bit careful but I'll show you why. So say we wanted all of these items to be position absolute and I've put classes on them so that does make things easier to select and we're gonna be selecting them individually in a second but what I could do just to make my life a little bit easier here is I could say that my card front and select everything inside of it so this is just selecting all the direct children of my card front and then on there we can put the position absolute so if I hit save everything just sort of stacks on top of each other and it makes this big mess that we can see right here. Now one way to understand this what's happening here is on my card front I'm gonna hit save now and give it a height of 20 pixels and you can see it's moved we have 20 pixels there and maybe let's make that 50 pixels and the card front and you know what maybe even we'll change the border color border color on this one's gonna be red for a second and you can see my card front here at the top is only that tall all the other elements are in there but their position absolute which means they're pulled out of the flow and because they're pulled out of the flow they're ignored by everything including the parent so the parent is shrinking down to zero pixels tall and that just makes life really hard to work with as I said it's a lot easier if we actually have a defined space to work with we can say select everything except the background image and we can do that like this so we're selecting every child except for so everything but or not including the card front BG and now if I hit save you can see things have moved around a little bit why did that not work and that's just because I still have the height on here so we can get rid of that height that's on there and there we go we have solved all the problems or not all the problems we've solved some of the problems that we've had now another thing you're gonna notice is the logo or not the logo but the text with the logo and the text and everything else is overlapped and it's also moved over to the right side and that's because when we do a position absolute it's sort of gonna try and stay where it originally was in the flow so in this case we have our image everything else has moved over and then they're getting a position absolute so they're sort of all stacking but they're not like shooting off somewhere else they're gonna stay in that realm that they were living in but now we can actually position it but how are we positioning it? We still need to think about that and I wanna make sure that I'm positioning it in this red box but ideally this red box should actually fit the image that's inside of it and that's the whole thing like we could give it a physical like an actual height and width it's an option but giving something an actual height and width it could be a little bit tricky especially if you want things to be responsive because responsive height all of that is a little bit we try to avoid that as much as possible generally so I actually want this image to define the size of what my div is going to be so one way we can do that and this one's very peculiar to this one situation where I'm using an image and I don't have any other content often something like this wouldn't necessarily be needed but really because we're trying to focus on like this one little thing that we're working on I'm gonna give this a width of min content and we'll hit save on that and you can see the width is actually shrunk down to fit the space of the image and min content means get as small as you can based on the content that's inside of there this specific step won't always be necessary in this situation but it's one of those things where I'm not worried about really how you get to this point but the point of what I'm doing right now is trying to have a defined space that I'm gonna be working with I wanna have this width, this height and ideally if you have content that can set that space up rather than having to set like a fixed width and a fixed height that are really just very specific and then it is hard to update later on that's usually the best approach so I'm trying to base things on the content that are in there and with the image being the only thing that's in there this is perhaps the best approach often you might be using something like display flex or some other things where it's sort of gonna be doing its own thing anyway on the parent and so this might not be something that you need to do it's really dependent on the situation but the main thing right now is just get yourself a defined space to be working in there is two things with this because this is an image a lot of resets have something like this where they have a width 100% I should say a max width so if you have that you'll actually have the whole thing disappear so that is 100% of the parent and if it's trying to be with 100% of the parent but the parent is a min content which means go as small as you possibly can get we just shrink down to nothing so if ever you do run into this type of situation a little bit of a divergence from positioning now I do apologize but if ever you do run into this position what you could do is select the specific element that is causing the problem and we could do a max width on there of revert and revert basically means or it does mean go back to whatever it was originally it is different from initial I'm not gonna go into the difference of them now but often when you use initial you probably actually wanna be using revert now the last thing here just really fast since we are working with an image you'll notice this little space that's underneath here that just means you need a display of block on the image which is a very common reset that you'll see used now really fast I just set this exactly up how we had before but added these selectors to also be doing the back and not only the front and I'm gonna just take this part right here and we're gonna move it down a little bit just cause I like having the parent first and then the children coming after that we'll hit save on there it also got rid of the color but again we have the border that's setting up the color on those so we can see them now I'm gonna start with taking the number so I just have my card front number here and just it has a larger font size it'd be a little bit easier to see what's happening so I'm gonna set the font size up for it first and we're gonna try and position this I'm gonna say a top of zero for now and it will move all the way up but I'm also going to say a right of zero and hit save and you can see it's moved all the way over but remember when I talked about we wanna set up something so we're working within a confined space we're defining the space we wanna live in and my number is completely gone from there or you know what let's do this instead of a top of a bottom and it's gonna shoot all the way down to the bottom of the page and that's really awkward I don't want it there I want it to live within this gradient background that I've set up with the green border on it so to be able to do that I wanna go ahead and define where the containing block for this element is and how can we do that? Well the easiest way is usually on the parent so on the card front and the card back here or I'll do it on this because we'll eventually get rid of those colors the borders on there and on this I'm gonna give those a position of relative and then when I hit save you're gonna see the number jump up and now it's living within the green box here because now this area is the containing block for it which means that because that's the containing block for it that this bottom is now relative to the bottom of here and the right is relative to the right there which I'm assuming you sort of know but we obviously don't want it to be here we need to move it around a little bit but the first thing I'm gonna do and remember these are actually working because here we turned them all into position absolute so other than the front BG so like all of these elements here are position absolute as well as my CVC number down here so first position absolute then I can use my top, my bottom, my left and my right and because we're locking it into where this green box is it makes it much easier to be responsive as we're gonna see soon but a few things really, really quickly we have my number there so let's leave this like that for a second I wanna show you another nice trick because there's a bit of an issue what we're gonna do to highlight this issue is on my front and my back here let's add a bit of padding padding to rim and when we add padding it adds space around so now we have all this space before my border that we can see and let's do this maybe for the logo because the logo is the first one and for now we're just gonna try a top zero and you'll notice that it goes into the padding normally if you do padding and there's text inside the text is pushed in when you're using position absolute that's not the case we end up with the space that's showing up here so obviously I don't want padding now but if we look at the design I do sort of want to sort of treat this like padding so even if this card was a background image and I just set a fixed width and a fixed height instead of basing it on the size of that original image I wouldn't be able to use padding to create all the space that I need around here on all the different sides I have to come up with a different approach and we're gonna do it sort of the traditional way but then I'll show you a nice trick to sort of create fake padding when you're using positioning so the first thing we're gonna do is get rid of that padding because we don't actually need it and we're gonna come in with a different solution and so here my logo instead of being a top there we're just gonna say that we wanna move down by two rem so I can do that and it's moved down by two and then we can also say a left of two rem and hit save and it's gonna move over by two and what this is doing is it saying the left side of my logo is two rem from the left and it's two rem down and the top is two rem down and that's important because now if we jump over to my name we'll skip the number and we'll come back to that but if we look at the name and I wanna position the name somewhere we can come and do that now we'll put it over here and we wanna put a bottom of two rem on there so that's gonna pull it down and of course the left of this can also be on that one so it's positioned relatively close to where I want it to be but the bottom of two rem here is not looking it's looking at the bottom of this element whereas when I said top before it was looking at the top of this element and this is important and you might already know this about positioning but this comes in a lot when we wanna do something like our number because our number is not really an obvious distance away from anything we sort of need to guess a little bit but it's close to the middle so my first guess when I see something like that is actually to do a top of 50% and hit save and you know what and we can throw the left on there left of two rem and if you look at that it might not be exact but it's actually pretty close and a lot of the time people use a top of 50% because they want the item to be in the middle top 50% does not mean the middle top 50% means the top of that element is 50% away from the top and the 50% is 50% of the parent so we're going the top of these numbers that blue line here is 50% of the way down so it's not perfectly centered it's offset by quite a bit and there's other tricks we can use to center things with positioning but for now we're not gonna worry about that too much because we don't need it centered and that I think is for me close enough this is I said we can avoid magic numbers this is maybe you're gonna do a 52 and you're gonna sort of try and line things up closer to the actual design if that's the case that's perfectly fine we're not magic numbering so much in terms of the overall layout we are semi magic numbering though within like within this little micro layout we're creating but because it's gonna be contained within the space when it is time to make it responsive it's going to work a lot better but even if you do get a little bit magic numbering with the elements or the numbers you're putting here because it's self-contained within a certain space when it is part of a bigger layout and things do start moving around it's perfectly fine because they're all moving together and they're all sort of locked into that one little thing that we've created so now I can come in and I can position here just out of the expiry as well and I'm just doing the same idea two rem over two rem from there and this is leading to one thing where I mentioned that we can solve this issue of having to repeat this number and if ever you're using positioning and you're repeating a number over and over and over again first of all I could make one big selector that would have the left of these all there since we are repeating that a little bit but what to me is more useful is to have a selector for just the card front so let's come right here and in this selector we can set a locally scoped custom property so this custom property is not in my root it's something that's only in my card front so that means it's only available to that element and it is inherited so that element and anything inside of that element so now I can come down here and on every place I had this two rem I'm just gonna select them all really fast with a command D or it's control D on windows command D on Mac and then I can set those all up as my card padding and the advantage with doing this with a custom property like that is now if I come in I need to go actually I need to tweak that a little bit they're all gonna move at the same time so if I need to reduce it they all get reduced if I need to make it bigger they all get bigger at the same time and so that just sort of now acts like padding would but with positioning which makes our life a little bit easier along the way and so now I've also added my CVC number here on the back which is definitely a little bit magic number rate especially with the 44 here so I said we'd move away from them but we're gonna move away from them in the sense of doing it like relative to viewport and using fractions of pixels and stuff we're getting things locked in in the layout that we want and then we can control that all together so now let's just say we do want to get this type of layout going on where we need to move things around and all of that once again we can start thinking well maybe I can use position absolute for it so let's just shrink this down a little bit just so it's a little closer to the design we're trying to do and we can say okay and we need my green card to be up at over and now I need this card to be down and stay on that side I guess and this becomes easy to do and once again we could use position absolute for this on the cards themselves so originally I'd set a position of relative here on the two cards and I said this made them into the containing blocks so everything would stay contained within that space as long as the position here is not static which is the default and we never really see it declared because usually we're declaring it it's because we're changing it from the default but if it's static it's gonna break everything because now everything's relative to the viewport but as long as you have a declared position other than static so my relative like I had before everything falls into line but I can actually switch these over to absolute and it's still gonna work now things broke a little bit because they're not looking at each other so they're overlapping each other now that means my card front and my card back are still the containing blocks and those pieces we just positioned aren't gonna break out of the green borders basically that we put on there so looking at the design the card front should be in front so we can easily do that by coming on here and just adding a Z index Z index is basically layering things I might could even do a one here but I'm gonna put a two just to be more obvious so we're just pulling that forward and now we wanna sort of move things around up and down or going okay if I need to move something I wanna have a defined space that it's living in and if I look here I have a defined space for it and the height here is happening because of the way I'd set up my grid you might not always have it but this is why having borders or backgrounds on stuff can be really helpful because it lets you see do I have a defined space that I can work with in this case yes I have a defined space that I can work with so because I do have that defined space on my card front we could try this and we're gonna have a small problem but let's just say that we do a top and actually this is bothering me that that's there we're gonna do it this way around but on here we can add a top now and this is gonna be a little bit or you know what let's do a bottom for now of zero and it's gonna go all the way down there because we have a defined space we haven't done anything to make that space the containing block and where we wanna contain it inside of so we do need to make sure so if we come back here and look remember that's on my card previews here that has that border on there so I have my card front and I wanna keep my card front inside of this card previews so I can jump over to my CSS come all the way up here give my card previews a position of relative hit save on there and now it's lining up with the bottom of that orange box so the bottom of that defined space and now this is the containing block so it will not escape outside of it that means I can also go on my card back here and put the right of zero to push it over to the right and now we'll see that even though the cards are sort of moving around and balancing back and forth and even though I use position absolute on those things that are inside the cards I don't have to worry about their positioning anymore I've set them up, I've locked them in and now we have this layout that's pretty responsive and it's working well and I'm happy basically with what I have here I can move this up maybe instead of a bottom zero we'd actually use something like a top of 35% or something just to sort of line it up where we need it to be or maybe even a set size would be better for that just if you don't want it to move with the viewport that really depends on what you need and in the design that you have and so we've created something that can function that can work and it can move around without any issue so even when I get to this other one now we have problems here with the way they're overlapping each other and we'll talk about why in a second but at least the cards themselves despite having used position absolute for everything inside them they move, they work, everything is fine because they're all relative to that defined space that we've created using position relative we're not worried about like bigger picture trying to move things with the viewport or anything like that soon as you're dealing with the viewport that's where things get into trouble and the reason this is sort of broken now is again I look at it and I go, well, what's happening? Well, I can see that my defined space that I had because of how I was using grid here was fine I had all this height and I had the width because the width is always basically gonna be there but when I get to this larger screen size the height of that is going and collapsing away because I'm using position absolute on the children my grid was helping me set things up when the items were stacked but now that we have this shrinking away it doesn't know what to do so we're sort of stuck so how can we fix this? So if we look at the design now when we're at the bigger screens these two don't actually need to overlap anymore so maybe I could take a little bit of a different approach with them and this is where you do need to be a little bit more like critical and thinking a bit about how am I gonna define that space or why is my space collapsing to zero or things like that? So what I think is a nice solution here and we could give it a height and try and figure out how big to make it 100% could work but I always try to avoid setting heights because setting heights and responsiveness tend not to go hand in hand very well so instead of trying to set a fixed height on something for me, another option here would actually be within the media query and I'm gonna come all the way down just to make life a little bit easier and set one up here is I'm gonna take my card front and my card back and I'm just using the same media query that I used to make the two columns and on these we had position absolute before which means the parent doesn't see it anymore it can collapse away we saw this early on when we first set up the cards and that's why I said, okay I want my images in here to actually be defining my space now we're into that same situation as we were before where the parent has collapsed away because it doesn't see the children and so now I wanna use my card front and my card back to actually define the space so I can do that by switching their positioning back over to relative and now if I hit save they stack on top of each other because position relative is very similar to position static in the defaults but now they stack on top of each other and we've solved a little bit of that problem we had now we also have the space that we need here we'll worry about that after though let's just worry about how we can actually get this card off to that side and one thing that you might think when you're using positioning you can actually do something like I could do a bottom is two REM and because I have a position relative on here I can use that and it's gonna move up by two REM or I could use that and do a negative two and pull it down by two the one thing this doesn't work with when you have a position relative on the parent because otherwise it's a little bit similar to position absolute but it's not pulled out of the flow but it would make positioning things like this side really, really hard or even getting this two REM from the bottom it would make that really, really hard and that's why position absolute is a good thing and sometimes we wanna use it but what we can't do is something when you have position relative I can't do a right of zero and get it to move to the right side of its containing block just doesn't work because that's not how position relative things work it's that's one of those magic things that comes from position absolute and one of the reasons we like using it because it just makes life a little bit easier on that front so even on the card front if I did a bottom zero it's not actually gonna go bottom zero of the parent it's more, it's based on where it already is so if I did a bottom zero here of like two REM it's gonna move but move from where it was and not two REM of the containing block that it's inside of that's what position absolute is for and why we use it so get rid of that one but because we can't use the right of zero here we could try and magic number it over but another easier way to do that is to use a margin left which will push it as far to the right as we can and usually we use auto when we wanna center something because we do a left and a right but if we have just a margin left of auto that means like go as far away from the left as you can so if we, so here is like this adapts and moves around a little bit we can see that it's always over on the left side and then to put the space in between them we could use a margin or something like that but for that type of thing I like using a grid with gap these days putting that on there you can see that it sort of worked we have the big problem of the space on the top and that's just actually coming from when I initially set things up when we were doing that I'd set the top at 35% for when we were at the small screens so we just need to make sure that we get rid of that I could actually do it on here and get rid of all the positioning because we have inset and inset is top left bottom and right and so we could just say either a revert or an auto we just make sure that all the positioning properties are taken off or as I said we could do a revert just to go back to what the default is as well I can then come here and hit save now to get rid of all the borders we had on there and we get I think what is pretty close to the type of layout that we wanted to have here and I think it's a nice exploration of how we can use positioning but of course we don't have a form over here and if you'd like to look at form and form validation and setting that side of things up to finish off this project let me know in the comments down below and it could be something that we look at in the future but for now I'm gonna say thank you very much to 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 call on the internet just a little bit more awesome.