CSS Positioning: Position absolute and relative explained

hi there my name is Kevin and in today's video we're going to be exploring position:absolute how it works a position relative and the Zed index I'm going to try and do it in as short of a time as possible so when I first got into the whole web thing I was having a lot of trouble until I learned about position:absolute and then I went crazy with it I started using it for everything I come from a print background and I'm used to just being able to position things exactly where I want in the program I click drag and it's there and obviously with CSS I couldn't do that but with position:absolute I could until I realized that was a really bad idea and this was before responsive web design it still caused its own problems and now that we're responsive it causes even more problem in this video what I want to be looking at is how the position:absolute works in relation to the whole page then we're going to look at how it works in relation to when you put something else in position:relative and how you can layer things with the z-index and how the z-index actually works already so we're in code pen right now and if you look down below in the description you will find the link to this if you want to play around with it yourself basically I just have a div here inside my div I have a paragraph I have a child div and then I have more text so the parent is this big aquamarine toward of turquoisey color I have my two paragraphs of text and in between them this red box which I've just called the child and I've made it red and give it a width and a height just so we can see it and see everything and we're going to be playing around with mostly the child to see how this whole position:absolute works so what I'm going to do is on here I'm going to put a position:absolute on here so position just like that now the main thing with position:absolute is it takes things out of the flow of the rest of the document so here it's a paragraph followed by my div followed by the paragraph which obviously makes it all line up like this but as soon as I put absolute on here it's going to come out at the flow and you can see the other text is going underneath it so by default it will stay where it is but it's no longer in the flow so other things pretty much ignore it it it's as if it's not there and you get this thing where it's going to be jumping on top of other stuff and pretty much anything in the normal flow Noma even though my paragraph comes after this div it will the text will still go underneath it everything will go underneath something that's positioned absolute by default now we're position:absolute gets interesting is we can give it the top bottom left and right properties so I can come in here and say that my top property is zero but you'll notice it's not even staying inside the parent anymore it flies outside of the parent and goes all the way up to the body and let's just do a left zero on there as well and it's going to the top zero left zero and this is pretty much how far away from the top are we and how far away from the left side are we so we're zero pixels away from the top and where zero pixels away from the left and then I could replace top with bottom and it will jump all the way down to the bottom so it's now zero pixels away from the bottom another interesting way you can use this let's get rid of our width or height and it will disappear for a second but I can say a top of zero a bottom of zero a left of zero and a right of 50% and that's what's going to make up the total size of it so the top is at zero pixels away from the top zero pixels away from the bottom zero pixels away from the left and 50% away from the right side and if I put fifty pixels instead of 50% it will be 50 pixels away from the right side and you can put any unit you want here 50m away from the right side so on and so forth and you can mix these up so let's say I keep my top and bottom but I could also give this a width of 100 pixels it will be zero pixels away from the top zero pixels away from the bottom and it has a width of 100 pixels now and now how absolute relates to relative is as I said this is all relative to the body right now and everything will default to being relative you know this top is zero pixels away relative to the body so it's zero pixels away from the top of the body but what if I want it to be zero pixels away from the top of the parent that's where that position whoops position:relative comes in position:absolute items will look for apparent and it could be a grandparent it doesn't have to be you know it can go farther there back it's going to look for something that has position relative that it's inside of it if it doesn't find that it will default to the body so by changing the parent to position relative now its top is zero the bottom is zero and the width will the width is staying the same but we could even do left let's say left 25% and a right of 25% and now it's top bottom zero left 25% away from the left and twenty-five present away from the right and this really is the most common way to use absolute position elements for me anyway is that the parent has the position relative on it so I can control exactly where the child will be inside of the parent and it just makes my life so much easier being able to do that for certain things honestly guys the thing to remember the most when using position absolute is the parent it's always relative to the last thing that has a relative on it position relative on it and if nothing has the position relative on it then it will be relative to the body and the other thing to remember is that it does take it out of the flow of everything else so if I go back to having a width of 50 pixels and a height of 50 pixels so it goes out of the flow of the rest of the document and other things will go underneath it and you can also use your Zed index now so Zed index of negative one will actually push it backwards and it disappears because it's behind this background now and you can use that index for layering things so that index of zero will be there because that's the default is zero on something let's just say we do my dot parent P whoops as that index will not work unless you have a position on it so I can do possession position relative just so it keeps with the flow of the document relative we'll keep the flow of the document normal unlike absolute and then I can do a Zed in of ten and the text will jump on top of my absolute position thing so yeah if two things if you need something to stay with the flow of a document but you need to use as that index you can use a position relative on it and if you want it to come out of the flow so we can either go on top or behind other things you want to use your position absolute and then you can position it exactly where you want it to let's just do a top hero and a right of left of zero on there and back onto this one position relative and there we go it's stuck in the top left I can put whatever I need there it's out of the flow these are on top because they have the higher Zed index but if I don't have the position relative that Zed index will not work you need to have a position on something for a Zed index to work and that is super important and that's how position:absolute works so I hope it makes a lot more sense to you now but if you do have any questions please leave a comment below and let me know I'll be glad to help you out with it and also I'd like to know if you have any other questions about some core concepts with HTML and CSS because I'm assuming if you're watching this you're relatively new to the whole world of CSS and all of that so if there's any major core concepts something that you're not understanding properly leave a comment down below and please let me know about it because I'd like to make a video that could help you and others out I do have a series there should be a card up there somewhere right now linking to it that is about core concepts it's different things I've covered the media queries and some other stuff in there so you can check that out but if you don't see what you're looking for in there let me know about it so thank you so much for watching this video if you haven't already subscribed to my channel I do bring you weekly tips tricks and tutorials just like this one and some more advanced topics as well so if you are interested in that sort of thing please hit the subscribe button and until next time take it easy

Channel: Kevin Powell

Views: 259,578

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, Position absolute and relative explained, Position absolute and relative, Position relative and absolute, position relative and absolute explained, css position absolute, css position relative, css z-index, css relative absolute, position absolute vs relative, position relative vs absolute, position absolute, position relative, Kevin Powell web

Id: P6UgYq3J3Qs

Length: 8min 30sec (510 seconds)

Published: Wed Feb 07 2018