Positioning

- [Instructor] The position property is used to move elements to different locations on a page. These are the different options for position that we will look at in this video: static, relative, absolute, fixed, and sticky. The default position is static. That means the element is where it is in the flow of the page. You can't use the left, right, top, and bottom properties to move a static element. The other values for position allow you to move the element around. Relative moves the element in relation to its original location, but doesn't affect any other elements.

It just leaves an empty space. So the code I'm gonna add here on line nine, I'm gonna apply it to class div2, which is a second block element. And then, position: relative, left: 40px, and top: 40px. And then save, go over here and refresh, and I get this. The left, right, and top and bottom properties are a bit tricky. You're not moving the element towards that direction, you're moving it from that direction.

So here, we're using left because we're starting at the left and going away from the left. Note that you can also use negative numbers here. On line 11, I'm gonna change both of these to negative 40, and save, and come back and refresh. So now it's moving it in the opposite direction. The absolute value for position moves an element in the direction you specify, but the difference is that it doesn't leave an empty space. So I'm gonna change this to position absolute, and change these both back to positive 40, and save, go over here and refresh.

So the browser acts as if that element is not in the flow of the page, and then it puts it where you specify on top of what is already there. The first thing you'll notice is that an absolutely positioned element doesn't have a default width of 100% like a block element normally would. So you see here that it's only as wide as the text it contains. Also, the browser doesn't position the element relative to its original location, as it did with relative positioning, it positions it absolutely inside the first containing element that doesn't have a position of static.

So what that means on this page, div2 is inside a container div that has a position of static. So it's not positioned inside that container div, it's positioned in the body element, so it's 40 pixels from the left and from the top. Position fixed works the same as absolute, but instead of looking for the first containing element that's not static, it's always positioned on the whole page, and it also stays in position as the user scrolls the page. Changing this to position fixed, save, and refresh.

And now, if I scroll, it just stays in that spot, no matter what happens to the rest of the page. Position sticky is a little bit different. The element is positioned on the page as normal, but as you scroll the page, once you reach the specified position for the element, it sticks in the viewport even as you scroll its location off the screen. So I'm gonna change this to position: sticky, and take out the left and only leave the top on there, and save, go back and refresh.

So now it looks like it's in the normal position, but as I scroll, it sticks to the top of the page, 40 pixels from the top, as I specified. A good example of where this might be used is when you have a navigation bar that you want to scroll with the content, but then stay at the top of the viewport as the user scrolls down the page. Once you're moving things around like this, you will often end up with elements in front of other elements, overlapping like this. Changing this back to position absolute, save and refresh.

An element that is moved with positioning will always be in front of non-positioned elements. You can change which elements are in front using z-index. You can give any positioned element a z-index of a positive number to come in front, or a negative number to go behind. Higher numbers go in front of lower numbers. So going back to the code, I'm gonna add a new line on line 12, and give it a z-index of negative one, and then save and refresh. And now, it's behind the other elements.

Elements have a default z-index of auto. Non-positioned elements are on the page first, in the order they are defined. Then positioned elements, like we discussed above, are in front of any non-positioned elements in the order they are defined. You can only apply z-index to positioned elements, that is, elements we have applied a position to that's not static. If you need to move a non-positioned element forward with z-index, you can just give it a position relative when you add the z-index to make it a positioned element. How z-index works can get a little more complicated than this, but most of the time this is enough to get your positioned elements to do what you want.