CSS Position Explained In 6 Minutes

[Music] in this video we're going to talk about CSS positioning I have a basic HTML file here and we have a parent box and two child boxes and then some very simple styles here we've got some resets here margin and padding of zero box-sizing border box on the body I have it set to 200 view height and 100 view width that is so that we can have some room to scroll and then a padding of two round so that we can see the outsides of the boxes then on the parent box I've just got some basic height and width and setting the background and padding so that we can see it and then on the children very similar to the height and width and then background colors so that we can differentiate the two and the first thing that we're going to look at is static so static positioning is the default positioning if we do not declare a position then it is static and so static positioning flows along with the HTML document flow so child box one and then shallowed box to the next position that we'll look at is relative so relative positioning is similar to static but we can now change the top right left and bottom attributes so now if we set the top to 100 pixels you'll see that it moves down 100 pixels and so this is relative to its original position so if I add a right here of 50 pixels it's going to move 50 pixels away from the right side of its original position so you see now that it is outside of its parent and it's overflowing the other child but its original space is reserved generally relative is not used in positioning elements in this way because it kind of messes up the document flow we'll look at a better use case for relative in just a minute next let's look at absolute positioning now you'll notice that the green box is gone well it's actually behind the orange box absolute positioning removes the element from the document flow and positions itself in reference to a container now that container has to have a position assigned to it as well right now our parent box does not have a position assigned to it so the child box is going to reference the top-level element which is the HTML element so now if we add right zero pixels you'll see now that it is all the way to the right of the screen it is positioning itself to the HTML element which is all the way on the right side of the screen so if I change this to left you'll see that it goes all the way to the left side of the screen let's add a top to this of 100 pixels and it moves it down a bit now if we wanted the green box to be on top of the orange box we could use a z-index so I could add a z-index to the green element and we'll just say 1 and when I save that you're going to notice that it doesn't do anything z-index only works if the element has a position so we'll need to assign a position to the green element as well and we'll just assign it a relative position because we don't want to remove it from the document flow we want it to stay where it is but just come on top of the orange box and there we go all right I'm going to take that position and z-index off and now let's look at the most common use case for a relative position so since absolute positions itself to its reference container if we want this box to stay within the parent we have to assign a position to the parent so we'll assign the parent a position of relative and now you can see that the box is aligned left to its parent and if we change this to right you'll see that it goes to the right of the parent so again since we have the parent assigned to a position the absolute box is now referencing the parent now notice when I scroll when this is set to absolute the Box Scrolls with the page now let's look at position fixed and we'll leave the same right 0 and top of 100 pixels and now you'll see here that fixed positions itself to the screen not to any specific container and now watch when we scroll it stays exactly where you put it on the screen and it will never move even when scrolled now the last position that we'll look at is sticky I'm going to remove all of these from the orange element and we're going to add this to the green element so position sticky is a combination of relative and fixed right now it is acting like it's relatively positioned as I scroll nothing happens it stays where it should but let's assign a value here to the top let's say 0 and you'll see here that it didn't move it is still acting like it's relatively in positioned but as I scroll when it hits the top 0 you'll notice that it now becomes fixed and then when it hits the bottom of its parent container it stops so it cannot leave its parent container as I scroll back up it will again stay at the top until it arrives back at its original position so a common use case for this is a header or a menu bar that you want to stick to the top once you've scrolled past a certain point there are a lot of cool things that you can do with sticky here's a great example of what you can do with sticky positioning this is a co pin by adrian donna mateo if my videos have helped you in any way and you have the means to do so help me out on patreon if you liked this video a thumbs up is appreciated I upload new content every week so hit subscribe in the belt to get notified I'm also on Twitter and Instagram that code stacker thanks for watching

Channel: codeSTACKr

Views: 20,103

Keywords: css position explained, position css, css position, position in css, css position tutorial, position absolute css, css absolute, z-index, css position absolute, css absolute relative, css absolute position, css relative position, css absolute vs relative, css absolute vs relative position, css position property, css fixed position, css positioning, absolute vs relative position, css relative, css position sticky, css tutorial for beginners, css for beginners, css tutorial

Id: XrHMv_9LCfo

Length: 6min 38sec (398 seconds)

Published: Wed Dec 11 2019

Reddit Comments

[u/codeSTACKr]

Hope this helps at least 1 person! Don't forget to SUBSCRIBE. Thank you for your support!!

CSS positioning can be difficult to understand. In this video we'll cover all of the CSS positions (static, relative, absolute, fixed, and sticky). I'll demonstrate examples of each of them to help you understand how each of them work.

Learning how CSS positioning works will make your future projects much easier to lay out.

[u/Turkino]

Nice timing, I've been playing around with a bunch of divs, containers, tables, and bootstrap grids trying to get my pet project page wrangled in react. Spent time doing CSS forever ago and really need a refresher.