Using CSS Position Absolute: some practical examples

a little while ago I made a video on the basics of position relative and position absolute in the comments a number of people said it'd be useful to know not only how it works but when to use position absolute so that's what this video is about now I'm not gonna be covering everything but just a few of the possible use cases of position absolute the things I use it for the most or pseudo elements so I'm doing a few of them here as decorative elements just to you know show how we can move different things around and some cool tricks to get things to go exactly where you want them to be and other times I do it where I just want to really position something specifically to create overlapping content and all of that and I think we can cover all of that with this card now I'm going over the top a bit here I'm adding some extra stuff that I wouldn't normally do just a really bang home the point and to make it more fun and get some cool little other tips and tricks along the way you know and some you know cool box shadow stuff and all of that cuz well why not so before I get starting this I am doing this in code pens but you can check out that code pen down below the link for it is in the description you can play around with the code a little bit and all of that and if you're brand new here my name is Kevin and I bring videos like this every single week so please consider subscribing now let's jump right into it what I'm gonna do now is I'm just bringing a simple card here so a div class card so inside of here I'm gonna want my image and I'm gonna give this one a card image like that and the source of it so the class is card underscore underscore image and I'm using the BEM naming conventions for this I just find it makes a lot of sense what I'm going to do here so my source is just gonna be a muse on splash dot it which is just a placeholder service and let's go with I don't know I don't know why 705 because 705 is a nice number and that is a nice picture when you do this whatever numbers you put it just randomly generates a picture so you don't like the picture you just change the numbers and you know change about one pixel even and you'll get a different picture so that can be handy to know that's we don't really need this that's just me or we don't need this so big right now so we can see we have my image and the other thing I'm gonna want in here is a card body so this is gonna be the main text area so this is the body's gonna hold my text and I'm gonna want two things let's give it a card title and a card text and if you're don't know what I'm doing here this is called Emmet um it's built into code pen it's also built into things like vs code and you can add it as a package to things like atom and sublime text so basically it's a ch3 dot so class of card title plus a card text that should probably be a paragraph before I keep going to a paragraph with a class of card text I push tab at the end here and it turns all of that into some nice little markup right there so I'm not gonna be too original with this this is a card and I have a little bit of lorem ipsum just saved off-screen so I'll drop that lorem ipsum in there and we start getting our text which is just showing up down at the bottom here and as far as the markup that's all we need so it's my card I have an image at the top and then I have a div that has my title and my text inside of it there so we can get rid of all that yeah I'm interesting that make that all go away so there's a few different things we're gonna want to do right off the start um so let's bring in our card now let's just give this a whit right off the bat of like I don't know 40% just of my window because we don't want to be the full size I need my image to be smaller obviously I'm on my card I'm gonna give this a position position:relative and I'll come back to this in a second since it is a focus on position:absolute let's fix up my image now so my it was card image so on my card image I want to do a position:absolute and I want to give it a width of 100% and a height of 100 percent now one advantage of using position:absolute is the heights are actually going to work properly whereas if you're not using position:absolute if you don't have a position on it the height sort of might not do what you're expecting it to so this will be a height of a hundred percent of its parent now if I took off this position you'll see that my image is actually really big it's getting a height that is 100 percent of my screen of the browser window here so this is getting a hundred percent height of that because the position:absolute is looking for the nearest parent element that has a position on it so it's looking for here this doesn't have a position on it so then it's going up to the body and it's defaulting at the body so it's matching the height of my body and it's the same with the top left right and all of that it's always going to fall back to whatever the closest parent container or div is that has a just that it's gonna fall back to the closest parent that has a position on it so position relative and that's even if the parent had a position:absolute or anything else I didn't make that mistake where I only mentioned relative in my last video and as a few of you hopefully pointed out it's not only position relative this will work even if this was position absolute um this is still going to be relative to this because this has a position on it but I'm gonna leave it like that alrighty so one cool thing that we can do on this as well is we can give this an object fit of cover and this is sort of like doing a background background size cover so without that it's actually stretching my image to fit in that space so it's squishing it all the way down right now so my object fit cover will just make it exactly like a background position cover it would do it's based on this width and height so because it's gonna set a width and a height on my image which is matching the size of my card right now and then it's going to cover it in that space so it's looking at its own width here which is an important thing to remember with it the other thing is I do want this behind everything else I'm gonna give it a Zed index of negative one just to push it backwards it's hard to see but my text is now on top of it so the negative one is working with the position you can't use as ENDEX without position and this is just pushing it words behind everything else let's come on with my card body next and we'll scroll down a bit well I'm all over the place card body and let's give this a background of I don't know RGBA I want black so and this right or no we'll try point five and we want a color of white so we can actually see my text on there um I'm gonna leave this for a second and we'll come back card title and card text can have a margin of zero thank you very much good good good um so my card body should have some padding on it so let's do padding of I'm gonna do two Ram usually I would use an M on this we're going to come back to why I'm using R M shortly to enough will stick uh maybe we'll try three that's not too bad okay I sort of like that so there's my card I think it's looking pretty good I do need to fix up my font sizes and everything let's hurry up on our way through that so my card title font size let's try three and see what happens that looks pretty good I'm gonna give it a line height I've run one just cuz if it does break onto two lines if I don't have that it'd probably be really big yeah that doesn't look so nice so I just want to tighten that up a little bit um actually I'm gonna give it a margin bottom actually on here of like 0.5 in that's not too bad so here I'm using MS and so it's gonna be relative to the size of the font so it's roughly half the height of the font is the space underneath okay I'm gonna leave that like that for now we're gonna come back to this and do some positioning on the title as well but now I want my text what do I need to do to my text I don't need to do anything right now we'll come back to that once we've designed a little bit more I think because it's looking okay so let's come all the way back up to here we have my card I'm gonna do my before and my card after so on both of these and pseudo elements I eat often often often amusing position:absolute on them so I'm gonna do a content on there if you don't know a lot about pseudo elements I do have a little series on those that look at how they work so you can check that out there should be a card on the screen now so I'm gonna do a position:absolute on these as well and let's give them a border one pixel solid white now we can't see them yet because they don't actually have any size I'm just I want them all these are just things they're gonna share and I'm doing position:absolute on them because I want to position them inside of my card and I know my card has a position:relative on it so this is gonna let me just position it where I want in there so let's take advantage of the fact that we can do that so we'll start with my before pretty much I want this to come on this side up and down so I'm gonna give it a top whoops let's give it a top of 1m a bottom of 1m and a right oh and this should be REMS this is why I was using the REM before actually and a right of let's do one room and then we go we get this nice sort of straight down line right there so it's one pixel thick because it's set on a border its top is one rep so it's top is this one Ram here which is about 16 pixels same on the bottom and same on the side here so we have the equal spacing all the way around now the reason I went with bream on my padding is because it's gonna let me control exactly where I want this a little bit easier just by using REMS here as well you could be using pixels on all of this if you're more comfortable with that but I am very used to using M's and REMS so minister to stick with it on this one so I knew that and to fix these up because these will not be positioned where I want them but after so this one we want it to go a list way so to do something like that I'm going to do a bottom of one rim and then the left of one Ram and a right of one rim and there we go it sort of frames off the card a little bit and I sort of like that now I think what I'm going to do is on my card text here do a text align right instead of left so it sort of squares up with that and that doesn't look too bad now we can do some different things with this for sure so I'm going to come back up to where these are I sort of like how that's looking right now though I might leave it like that I was originally gonna have them sort of crossing a little bit but if you wanted to do that it would just mean so my top is one rim my bottom is one rim so say my bottom extended a little bit let's do like a point five so it's gonna extend down a little more and then this one my right side so the right side I could do a point five on that too I'm just going to extend that way and then it sort of gives this list little X type thing now I don't really like that so I'm going to move these I'm gonna move that up a little bit bottom then I can stay at one the right can stay at one and I want to move top bottom right one point five there we go I think that looks a little bit nicer if they're crossing but I'm not actually gonna have them cross I changed my mind on that now so let's go back I think I'm just gonna leave it like that and once I put in a bit more here we can always revisit and see if we actually want to change that all right that's a with pseudo elements like that's a really basic easy way to use the positioning to get things where you want them to go now another way you can do it is I'm gonna do this in a bit of a fun way I think I'm gonna add in some positioning on my actual title here and we're gonna be using some absolute positioning and some pseudo elements on this one as well so let's go and find my title so there's my title so what I want is my card title before and once again content will be something like that and I'm gonna want to do some position:absolute on this to get it to go exactly where I want it to and now if I'm doing a position:absolute on this it means I probably want the parent element to be a position:relative so let's just give this a background background of yellow and I'm just going to give this again a height of 100 percent just to highlight with of 100% just to show why I'm doing it like this so because this is position:absolute and this is positioned relative this is being positioned relative to the title so that's where my text was this is the div the card title right here if I took this off now it's getting the width and the height of the card itself and if I needed to I could do like a top:0 left:0 and I can actually have it overlay directly on top of all the stuff I've already done so maybe you want to do something like that maybe you don't want this you don't want to be relative to that you actually want it to be relative to the whole things you need to fill up a background or something like that and in that case that's fine that might be exactly what you want but in this case that's not what I want so I'm going to add in my position relative right there so it's just going like do that now one funny thing here is if I come on this and I do is add index of negative one like it did before because I wanted things to get pushed in the background it's on top of the other negative one thing but it's actually behind that background so I'm losing my bright color which stinks that's not what I want so I'm not gonna put my Zed index on here what I'm gonna do is actually come on my card title itself and we do a z-index on here just one so what this is doing is it's pulling the whole card title upwards because I have a position:relative it's taking the whole thing and it's pulling that sort of on to its own layer it's pulling it away and putting it onto its own layer and then I can use my Zed index of negative 1 on this and it layers it the way I needed to it's a little bit weird a hundred percent but pretty much everything was sort of sitting on its own thing and then the title was getting pushed backwards one a little bit and it was going behind things so now what I'm doing is my card titles getting pulled up and by giving it the position:relative and a Zed index and then it's pretty much because I'm giving the parent the Zed index that this is working out and we can't read my text so let's give this a color black yeah so we can actually read it because that would help now we can actually start positioning this where we need it to be um if I want this to stick out the side here what we can do is I know that my padding on the side here is three R M right and this is again one of the reasons I set things in R M is just because it makes it a lot easier when I'm want to position everything in here so because I know this is three R M on my left here if I actually did this as a start with negative three RAM and it should line up perfectly so it's pulling it back that distance that was my padding so now it's lining up exactly where I want and if I want it to hang off the side here I could just make this a bigger number say negative five and then it's gonna stick out the the side a little bit my top let's make the top a little bit bigger 0.1 m I'm using M now so it's relative to the font size and actually I should be a negative not a positive so it actually moves up and then a bottom [Music] of negative 0.1 m oh I have a height on this I'm going to take do I even need a whiff yeah I mean I mean I'm gonna leave my width for the moment and my bottom looks like it should be a little bit bigger just to balance it okay so I'm pretty happy with that now for the width as well I want it to be a very specific size I wanted to keep I wanted to go to originally where it was I wanted to stop like I wanted to stop here with the lining up with this text here so how can I do that because I pulled it negative 4 or negative 5 rim this way how can I make sure that the width is exactly that I'm gonna use the calc function which is really really awesome so CSS calc is really cool lets you do calculations I'm going to 100% and +5 REM and it's gonna line up perfectly so it's doing the hundred percent of the the width of my card title which and then it's adding an extra 5 REM to it so it's compensating for this space here it's pulling it with that way there so I'm adding the exactly what I need which is really cool that I can do something like that now the last thing I want to do in here is actually want to make it look like it's going if there's like a slice and it's going underneath my card here so to do that I'm gonna use a box shadow box shadow and um for this let's start just by making a box shadow a 0 0 10 pixels 0 black let's just see what that so there we go we got like a pretty standard little drop shadow on it but I don't want it to be on the outside like that so I can just come to the front and write an inset and it's gonna pull itself to the inside like that so that's really useful except to really make this work properly I only want the shadow to be on this side I don't want this to be anywhere else so how can I do that well it's not that bad what I'm going to do is play around with a few of these values so the first thing I want to do is make sure that it's positioned sort of where I want so what I'm gonna do is do a negative try 15 and see what happens so I'm pretty much pulling my shadow to the left my horizontal offset is just getting pulled 15 pixels towards the left so you can see there's a lot more shadow here and this shadow is started to disappear now the one problem with this is I'm left with some shadow on the top and some shadow on the bottom which I don't want so that's where this comes in and this is the one that a lot of people forget about this is the spread and so a spread means how far do I go until I start my stuff start my thing so if I did 10 pixels it's gonna go 10 pixels of solid black and then it's gonna start doing a bit of a shadow now that's the opposite of what I want so you can sort of get an idea of what I want I'm gonna do a negative here and it does the opposite and I'm very purposely making these numbers equal to each other I want to make sure that there's nothing here so my 10 pixels of blur is stopping right before so the negative 10 pulls it back 10 pixels and then it starts to come in so the only thing that's left is about 5 pixels of shadow right here and that's it I'm going to change this color a little bit just because I find it's a little too dark so we're going to do an RGBA and we'll go with black I don't know we'll try 0.5 that looks a little bit nicer so already it looks like it's sort of going into the card it'd be really cool if we could have it sticking out on this side and I also need to balance this off because it's not in the middle of this space Apple will come back to that after when we fine-tune this um see I want the the rest of the cards sticking out or the rest of the card the rest of this yellow thing to really complete the look to be sticking it on that side so guess what we need another suit element and more positioning so card title after so what can we do to this thing we can do content because we have to and we can do a position:absolute because I want to be able to position it exactly where I want and now me is the same top and bottom that I use before I could probably should combine these into a single selector for some of these things that are repeating just because it would be better practice but I'm gonna do it this way anyway okay how big do we want width I don't know let's just do two rim just because I don't know how big to make it am background I'm gonna make it pink now just so we can see where it is and I'll change over to yellow after that's right be a bit bigger let's make that three okay we can always fine tune that so I want it to be exactly here and if I did something like I like keeping all these together top bottom and we'll go with the left if I did a left zero it's just gonna go to there so if I did even the left 100% it's gonna go to right where that finishes so it's pushing the left side a hundred percent of the way over and it's lining up with where the original thing is finishing I need to move it over even more than that well luckily I know exactly how big this space is so just like before I can do it calc 100% plus three around because I know that I have exactly three rim of padding so it's pushing it over exactly three R M plus a hundred percent so it's moving to here plus three R M it goes exactly where I wanted it to and now we can make that back to yellow and that's pretty cool I could also take this same box shadow that I had on that and put it on here now I don't want the exact same box shadow because that looks weird so I just need to change this from negative 15 to i positive 15 and it will jump to the other side looks a little bit too much on this one for some reason I'm actually going to make this a little bit smaller just to make it a bit more subtle now one thing is if this is gonna have a shadow on it that means there is some sort of light on this so I think the whole card itself should also get a bit of a shadow so let's just go find my whole card so box shadow this one I'm gonna go pretty simple I'm gonna do like a zero zero because I don't want any offset we'll do like a 25 pixel blur like that our thing and then zero and then our GBA and I want this to be pretty subtle 0.25 maybe 0.35 so it's not I want this to be a bigger blur because it's farther back sort of like this is closer to the light source than however you know or these are closer to each other and this might be a bit farther off I just want to really subtle shadow more or less that's just there a little little little bit I guess ideally this would also have a shadow on it but that would cause a bit more problem so we'll stick with it just like this so I'm pretty happy with all of that I just want to fix the positioning of these lines because it's bugging me that this space is bigger than that space so let's go and do that so here is those ones so top I'm gonna just actually change all of these to 1.5 and it's gonna copy I think if they're all changed 1.5 it's gonna be exactly what I want there we go awesome I'm pretty happy with that and one nice thing with this is as soon as the text gets there because this is reaching the 100% part it's just gonna fall like that and it works beautifully on multiple lines doesn't matter what we have it should always work until it starts getting too narrow and the text will cause some issues but overall it should pretty much work at any screen size and all of that so yeah if you're using position:absolute properly you shouldn't and run into any issues with responsiveness or anything like that if you're using it in ways that it's not really meant to be used then you might run into some issues though so you just got to be careful but in general design I'm using it for all the time or here where I'm bringing my picture into the background of something especially now with that object fit you can do it now just be careful with object fit browser support you might want to check it out first have no promises on that one but yeah that's there there's the card I hope you liked it and if you did like this video please hit the thumbs up if you have any questions any comments about this video at all please don't be shy leave a comment down below thank you so much to my patrons you guys are awesome and of course until next time don't forget to make you recording the internet just a little bit more awesome

Channel: Kevin Powell

Views: 87,430

Keywords: Kevin Powell, tutorial, html, css, css position absolute, css absolute positioning, css absolute position responsive, css absolute position z-index, css absolute vs relative, css absolute position vs relative, how to use absolute position, how to use css absolute position, how to use css position absolute, css position absolute responsive

Id: lUaw-AA9HnA

Length: 26min 17sec (1577 seconds)

Published: Wed Mar 28 2018