Position Fixed

[00:00:00]
>> Kevin Powell: So we've talked about flexbox, we've talked about grid, we've talked about responsive design, now we're finally getting to positioning. This is always something I hesitate to teach because I don't want people to use positioning. Not that they shouldn't use it, everybody, it's a tool we have and there's a good use case for it. The problem with positioning is when people learn about it, they start using it for things it's not intended for.

[00:00:19]
So it's really important we understand our layouts are created with our layout tools which are flexbox and grid, and then we bring positioning in to do some other stuff when those ones can't get the job done. So it's like, as I say here, it's the last line, don't use it unless nothing else can do what you're trying to do, is how I think of positioning. With position, there's 5 values, 4 of them are the ones you generally declare.

[00:00:44]
Static is the default value, so a position of static is just what every element is, unless you tell it to be something else. The other ones are absolute, fixed, relative, and sticky, and they all behave in wildly different ways, with some similarities between them. Anytime we use any of those four, so position, absolute, fixed, relative, or sticky, it unlocks a new set of properties that we never had before, which are top, bottom, left, right, inset, which is a shorthand for those, and z-index.

[00:01:16]
And I do say z-index because I mentioned earlier I'm Canadian, and not zed index. It actually drives me nuts when I hear people say zed index, even though it doesn't really matter, but one of those things. When my kids say zed sometimes, I'm like, you're not Canadian. Whose child are you? We use these properties to manipulate where the element is on the page, so we change the position, it gives us these properties, and then we can play around with it.

[00:01:46]
The weird thing with the positioning, well, first of all, I guess the important thing to know, this is another layout mode change. So the rules of what we know go out the window a little bit and we have to go, OK, we've changed the position, now things are working in new ways compared to what they were working before when we were in our normal flow. The other weird thing is the top, bottom, left and right also work a little bit different depending on which position you're using.

[00:02:10]
So it's that, you know, again, people are like, oh, CSS is inconsistent, top works different in these different places. When you know what those things are supposed to do, it makes sense how it's working, but it is one of those things where you don't have like a global rule set on what these are doing. So I'm going to start with position fixed because it's the easiest one to understand, and we're going to work our way through into absolute, which is, I guess, easy to understand, but has the most rules and caveats around how we actually can use it.

[00:02:43]
So position fixed, all I've done for now, I have this element, it's a box, and it is fixed, and I have a position of fixed. If I remove the fixed from here, let's say we haven't declared that, nothing is actually going to change if I don't do anything. It's there. I do a position of fixed, so we say, well, what's actually happened? But what we've done is we've fixed it to the viewport. So now if I scroll, it scrolls with the viewport.

[00:03:09]
That's what position fixed does. The most common use cases for it are navigation bars that scroll down with the page, and there's like those annoying social share buttons that on mobile cover the text you're trying to read. So we have to be really careful when we're using position fixed for that exact reason that we're going to cover content potentially. It's pulled out of the flow when we do this.

[00:03:30]
Whenever we use these positions, not all of them, but fixed, we say it's out of the flow because we've taken it out of the document. It's sort of in its own little world now, and we're fixing it to the viewport. If I come on this position fixed element, as I said, we have top, bottom, left and right. So if I say top and I give it a number, let's say 10 pixels. I'm saying that it's now fixed, 10 pixels from the top of whatever it was fixed to, which is my viewport.

[00:04:01]
So now there's a 10 pixel gap at the top of my page and it stays right there. I can now say a left of 50 pixels, and it's fixed 50 pixels from the left of my viewport and no matter what I do, it will always be there as I move things around. Where things get a little bit more interesting is when you mix left and right. So if I say, I might have a size on this, we'll have to check, but if I say right 50 pixels, I don't think it's going to move yet.

[00:04:27]
Do I have a width? I have a width on it. So the reason it hasn't moved is because I fixed it to the left and I fixed it to the right, but I have a width where I'm saying it's 100 pixels wide, so it stays on that left side. So there's a little bit of a conflict that's coming up between those. And if I remove this one though, and we're not fixed to the left side, now it will go and fix itself to the right side.

[00:04:52]
When you're fixing smaller elements into a bigger space, it actually is saying like it's allowed to live in that area and you can manipulate it with margins and other things to actually move it in that space. The auto margins will work and it's kind of weird in a sense, but at a basic level, this is working pretty well. You can also say something like bottom. Bottom of 0 sticks all the way at the bottom.

[00:05:15]
We can use 0 all the time and it will just top 0, bottom 0, those always work. So, and it's always fixed to the viewport no matter what we do. I mentioned that navigations are a really common use case for these, so I have this example with our nav bar we've been using a lot. But we're going to see there's a few things that happen when you use it. We're in silly demo land, now we're in a more realistic world.

[00:05:36]
So let's go grab that page header. Dot page, I already have the selector, but we'll do it on a separate one just to keep things separate. So page header, position fixed. A few different things happened. Pulled out of the flow, because it's pulled out of the flow, the other content doesn't see it anymore, the other content moves up underneath it. That sucks. It's always a big pain point right there, but it's fixed.

[00:06:09]
It's following us. There is another change as well, so I'm going to turn that off. Turn it back on. What's another change that's happening? It's not in its container. It's not in its container. It's been completely pulled out, so you can see before we had it. It's even the whole size of it has actually changed. It's stopping over here. It used to be going the full size, now it's sort of shrunk down.

[00:06:31]
It's doing its own thing, really doesn't care about anything else anymore. We're changing layout modes. We've also now gone away from the block element wanting to be a width of auto which is full size. The width auto now is a lot more like a fit-content that we were looking at earlier with those intrinsic sizes. It won't over, oh, it's overflowing now because I don't have a flex wrap. Let's add a flex wrap quickly.

[00:06:58]
So now it won't overflow, it will wrap down if it needs to. But this type of thing happens where it shrinks to be the size it wants. So usually what you do is then you say that the top is 0 because you want it to be all the way fixed to the top. You want it to stay on the left, so we say a left of 0, and we say a right of 0 to actually say, you know, go all the way to the right side too. There is no defined width here.

[00:07:21]
I need some semicolons. Because I haven't defined a width, I can say that my left and my right are 0 and it's going to pull it to fill up that entire space. We still have the problem. I can't read my title. The title's underneath there. This was a big pain point for a while. It's actually why I'd say don't use position fixed if this is the behavior we're after, there's better solutions now. But the solution for this, if ever you're on an older codebase, body, padding top or block start.

[00:07:54]
I don't know, 100 pixels. And then we push the content back down so it has somewhere to live. People used to use JavaScript here to detect the height of the nav bar to then add that padding as an inline style to push the content down, just so you'd know exactly how far down you'd need it to get to. And it works, you know, it's not the worst pattern in the world, but there's simpler ways of doing it than this.

[00:08:16]
One thing I do want to mention before we move on to the next one is top, left, right. I said the left, if you don't have a defined width or height, and you use the left and the right, you can stretch it that way. You can also come in with a bottom of 0, and it's going to go all the way to the bottom as well and cover your whole page, and I mentioned the inset. Inset's been around for a while and nobody knows about it.

[00:08:44]
I use inset for everything now. Inset is like your margin shorthand, top, right, bottom, left. So we say top 0. Right, let's just use different values for now, 10 pixels, bottom 20 pixels, left of 100 pixels. Just to throw some various numbers on there. We have 100 pixels on the left, 20 pixels, 10 and 0 on the top. Let's make this maybe 100, just so we can see a change. We get something like that.

[00:09:11]
So you can use the shorthand. A lot of the time I use the shorthand, I'm only putting in one value, you're just setting your top, your bottom, your left, your right, all at the same time, 10 pixels just pulls it in by a little bit. Yeah, so it's inset exactly the same as top, bottom, left, right. It maps directly to them from what I understand, yeah. The other thing with inset, before, I wanted a top, a left and a right, but not a bottom.

[00:09:40]
If that's the case, it's the same way around, so we're starting at the top, 0, clockwise around, our right is 0. I don't want to declare a bottom, so I can put in auto, and then I can do 0 for the last one. And the auto just means like ignore this, pretend I'm not setting anything for that one of them, and then it's a nice way that you can use that. There's a really weird thing, I'm not going to dive into it today.

[00:10:02]
But position fixed can get fixed to things other than the viewport. This won't happen often. You can check out this MDN article to see the different things. There's perspective and filter properties that can cause this to happen. My general rule of thumb is if you want something to be positioned fixed, what happens is people have it as like something that's nested in these other things and they're trying to manipulate those other things, and if it gets fixed to one of those other things and that thing scrolls off the page, it scrolls with it.

[00:10:28]
So it completely breaks the functionality of the display fixed or position fixed, I should say. And so the general rule of thumb is if it's positioned fixed, it's out of the flow already. Do you really need it nested in anything else? You can probably just have it as a direct child of the body, and then you'll never run into any issues with it. Because when one of these things happens and a display fixed starts scrolling off, good luck in trying to debug that, it's going to be a nightmare.