Position Relative & Absolute

[00:00:00]
>> Kevin Powell: Next up, we're going to be looking at position relative. It's a bit of a strange one because we use it, but not for moving things around, even though you can move stuff around with it, which is kind of strange in a sense, but let's take a look at what, how it works and what it does with this relatively simple demo. I'm just going to go on, we'll go on number two. We'll start with a position relative.

[00:00:24]
And nothing happens. It's not like that nothing happens with position sticky either. If you just declare a position relative like this, it will never move around, it won't do anything, it doesn't stick to anything. Just stays there and behaves like a regular element, basically. The one big difference, we've unlocked the top, bottom, left and right, like we had before. And this is the situation where the top, bottom, left and right work different than they did previously.

[00:00:54]
When we were looking at display sticky and display fixed, they were sticking to the viewport in the different sides we were assigning it to. With position relative, if I say top 20 pixels, it is going to move down 20 pixels relative to where it was on the page before. And let's say left 100 pixels and it moves over 100 pixels relative to where it was before. The important thing here you might have also noticed is unlike position fixed, where when we pulled it out of the flow, the other elements were going underneath it, it's sort of stayed in the flow.

[00:01:32]
We've moved it over, but nothing is really aware that it's actually moved. So we still have that big empty spot. I've shifted it, it's overlapping another piece of content now, and we have a weird empty space that's there. For the most part, while we can do this and we can move things around with it, we don't do this terribly often. There might be a few use cases every now and then you just need to shove something over.

[00:01:57]
There are better ways of doing that. So usually if we use a position of relative, we're only declaring a position relative and nothing else, and that seems a bit weird when you look at it like that, like why would we do this not to have any side effects or do something with it. But it's because position relative often isn't used all on its own. It's usually used with the other positioning property, which is the one we haven't talked about yet, position absolute.

[00:02:27]
I saved it for last because it's different enough from the other ones and there's a really important concept that comes in to using it, so it takes a little bit longer to explain. So we're going to start with the basics of how it works, we'll bring it back to why it works with position relative and then sort of look at a common use case for it with our project. So, my parent is the one with the black border on it.

[00:02:51]
We have some text in there, a couple paragraphs, and then I have this element here, the little hand waving at us, that is the child. On that one, I will give this a position absolute. It's going to be a bit like when we do a position fixed. It comes out of the flow, the other elements don't see it anymore. With that I could say top of zero. It's going to look like position fixed now and then moves up to the top.

[00:03:21]
But unlike position fixed, it's not fixed to the viewport, it's fixed to that position on my layout. So now if I scroll, it scrolls away with it. Same thing, let's switch the top to the bottom. Interestingly, it will go to the bottom of the viewport, that's where the bottom is. If I scroll, it doesn't stick, it's not the bottom of your page, it's the bottom of the viewport, which is a bit of a strange behavior, and then we scroll off like that.

[00:03:48]
So it's pulled out of the flow, we can move it around where we want it to, but in a sense it's now part of my layout in a way because it works with the rest of my layout. When people first learn a position absolute, or I know when I did anyway, I was like, oh, who needs to use other ways of making layouts? I can just put everything where I need it to be, and then I have a layout. In the old days of the web, you might have been able to get away with that.

[00:04:13]
These days with the web with responsive design, it would be a nightmare to work that way. That's why I say only use positioning as a last resort. Because you can imagine if you start trying to place everything on the page and then things start moving around and everything has very specific locations, that moving around, things start colliding into each other, overlapping with each other, it's a disaster.

[00:04:33]
If you're looking at this going, why would I ever use position absolute, you're not crazy. It's a really good question because it's really strange that the top, the bottom, the left and the right are relative to the viewport, but then if I scroll, it scrolls with it. It would make it very hard to position an element where you'd want it to be on the page or within something else. Where it becomes useful is when another element, one of its ancestors that it's nested inside of, has a position on it, and this is usually where you'll put a position of relative.

[00:05:09]
Now it's positioned to a bottom of zero relative to its parent. It's how I like to think of it. The parent is now what we call a containing block. Whenever we use a position other than static, that element will become a containing block for position absolute elements that are positioned inside of it. So if I did this as a position fixed on the parent, this would stay here as well, stuck to the bottom.

[00:05:33]
Now I'm actually scrolling, but the scrolling isn't showing up because we're fixed. Pretty sure it would still work with sticky. I've never even tried this. Yeah, it will. Let's do sticky, top zero, and my element's sticking, and this is positioned absolute within that box, and this is where things get a little bit more interesting, but again, most of the time this outer one, you don't usually want to change the behavior or the positioning of it and pull it out of the flow.

[00:06:02]
Position fixed, sticky, they have these side effects to them. Position relative, everything around it still sees it. It doesn't get pulled out of the flow. There's no layout impact outside of that. But then I can say, oh, I have this decorative element. I want this to actually be a, let's say top, I'll do bottom. We'll say bottom. Instead of zero, you can, for all of these, you can always use negative values, -20 pixels, and a right of -20 pixels, and you can position it sort of sticking off the bottom corner of your element or something like that.

[00:06:33]
You're not going to have a little hand waving, but you'll have some sort of decorative element that you can actually get it to go where you want it to. And this is where things start becoming a little bit more interesting and a little bit more useful.