Z-Index & Positioning

[00:00:00]
>> So Z-Index sets the stacking order of elements and it takes a couple of different values, can take auto, the keyword auto can take an integer, or can take a global value like inherit. Here's a CodePen I'm gonna take you to Skellington the slides. Here we've got a div with a class of container.

[00:00:18]
We got four blocks inside of it here. So, each block, there's a block class that is setting the width and height explicitly. And then each color is gonna set the background. Each class that has a color name will set the background to a different color, right? So ignore the position for now.

[00:00:38]
We're not gonna worry about position. What I want to do is show you the stacking order. So right now, they all have a stacking order index, or z-index 0. They start out at 0. So the yellow square here is on top. It's defined last in our code here.

[00:00:56]
If I set z-index of -1, well, now it's gonna come behind all of the other elements because the other elements have a z-index of 0, so they'll sit on top of it. And if I want the red one to be on top, I can give it a z-index of 2 or even a z-index of 1, right?

[00:01:13]
Because zero is a default. So this is a way that you can layer elements into your UI regardless of how it's structured in your code and your HTML code. Okay, we go back to this. Now, I just mentioned it to ignore position. Position is something that I struggled with immensely when I started out, it was very confusing for me to understand.

[00:01:36]
So I'm hoping that this explanation will suffice. So, position sets how an element is positioned in a document. We can set top, right, bottom, and left values to assign it in accordance with the position. But let's look at this. And again, these are not cumulative. There are other values for position.

[00:01:53]
These are the most frequently used. So a position of static. The element is positioned according to the normal document flow. So the top, right, bottom and left the properties, they won't have an effect on an element with a position of static, right? So if we've got two boxes and we set the red box to have a position of static, it's gonna stay where it is.

[00:02:17]
Let me, Open this. So we set position of static, we can see the red boxes to find first, blue boxes to find second. Position of static does not change, where it's located stays the same. And you can see top and left, that has no effect on that element.

[00:02:38]
Position relative. So that element is positioned according to the normal document flow, but it's offset relative to where it normally would show up. So this is where top, right, bottom, and left will come into play. So if we go back here, let's set a position on relative on this red box here.

[00:02:56]
So comment this out. It's position relative. There we go, that's why. There was a top value set on the box class. Okay, so we set position relative on the box. It's rendered normally where it would be, right? But let's say we wanna shift it down into the right 20 pixels.

[00:03:16]
We can do that using top 20 pixels, left 20 pixels. It's saying take the top and the left and shift them 20 pixels to the right, 20 pixels down. So that's what relative does. It's relative to where it normally would show up. Absolute is interesting. So it's gonna remove the element from the normal document flow.

[00:03:39]
And it's gonna be positioned relative to its closest positioned ancestor. So what does that mean? Let's go back in here. So let's change this to position absolute, and I'm gonna comment these out. So position absolute, okay, we're only seeing the red box. Why is that? That's a little strange?

[00:04:02]
Because we're setting position absolute on this red box, it's being removed from the DOM the normal flow and as a result, the blue box underneath it is being rendered in its place, right? It's filling the spot where the red one normally would have gone. But because position absolute is removing it, it's also setting the z-index to be higher, so it's gonna sit on top And that's why we're seeing it, only the red box.

[00:04:27]
The blue box is being rendered where the red one should have been, but the red one is now higher in the stacking order. So if we set top and left again now, on the red box, we can see they're both there. Blue is pretending that red does not exist.

[00:04:43]
And top and left have moved the position of this red box. But what's weird, why is it so close to this border here? Like we're trying to make it 20 pixels to the right, 20 pixels down. So why is it so close to this container? And that's because we haven't set a position on the container here.

[00:05:05]
This container does not have position relative, so what's happening is that this red box is being positioned in relation to this body, the body of the render. It's being positioned relative to the viewport or the rendering of the UI here. So in order to fix that, we want this positioned relative to its container.

[00:05:29]
The container has to have a position of relative. So now it's being respected from the container, as opposed to the entire viewport there. If you're wondering why you're seeing a little like sliver of blue here, that's because we've set 24 pixels of padding on the container. And so, we're getting a tiny bit of overlap because we've said 20, move this down 20 by 20, but there's 24 pixels of padding.

[00:05:53]
So that's why you're seeing that little sliver there. There is a great use case for this. And that is tool tips. So when you hover over this, you want a tool tip to display, right? This is a pretty common paradigm. So we've got a div, that's the container.

[00:06:12]
We've got a paragraph that says, hover over me. We've got a tool tip. So we want this tooltip to be positioned relative to the container, we want it to show up relative to what's already in here to this paragraph here. So I'm not gonna run through this example in depth here.

[00:06:34]
I just wanted to point out that it's very common practice to use position absolute and have the container have a position of relative when you're trying to position a tooltip in your UI. So, feel free to check this out later. That leads us to position of fixed. So, fixed and sticky are two that confuse the living daylights out of me for the longest time.

[00:06:54]
I didn't understand the difference. So I have a couple of videos that will illustrate the difference here. So fixed, when you have an element of position fixed, it is again removed from the document flow. And it's positioned relative to the containing block that's established by the viewport. So what does that mean?

[00:07:11]
So here is a little video. Our red box has a position of fixed, you can see that on line 20 here and we can go do this in the code pen. And you'll notice as we scroll it scrolls with the viewport, right? So, position fixed, it's gonna be fixed.

[00:07:35]
20 pixels top, it's pushed 20 pixels right and down, but it scrolls with you the entire viewport width, right? When it comes to position sticky, it's very similar. The difference is, it's going to stop when its container has reached its end. So if we go back to our CodePen, and now instead of fixed we want it to be sticky, let's code it in real time.

[00:08:11]
We've got our container. Let's give it a height. Let's say height 600 Pixels, right? We give it a border, so we can see were that continuous lies, and say 4 pixels solid block, am also coding live an the fly, so let's see how this goes. I wanna be able to wrap this, we gonna give it div with a class of wrapper, I am using that mi notation for brevity here so, bear with me, ignore my spacing.

[00:08:42]
So now we've got a div with a class of wrapper. We'll give the wrapper a background color so we can see it. Background, we'll call it light gray, it's a named color. And we will give this a height, let's say, of 400 pixels, okay? So it doesn't take up the entire, Container.

[00:09:05]
Now, instead of fixed, you can see fixed, it's gonna scroll with the whole thing, regardless of the bounding container here. Change this to sticky. If we change this to sticky, it's gonna stop when this container is scrolled out of view. Let's illustrate that, let's make this 800 so there's a bigger gap, right?

[00:09:24]
Scrolls and scrolls, it stops and it scrolls up with the rest of its container. So that's the difference between fixed and sticky. All right, that was the hardest concept in this whole course, so if you stuck with me you're golden.