Get an overview of how CSS position can be used to arrange HTML elements relative to its normal flow on the page or relative to the browser viewport.
- [Narrator] The position property can also be used to change the flow of the document. There are 5 different values. Each responsible for a different type of positioning. Static is the initial value, which means elements are not positioned. The 4 other values: relative, absolute, fixed, and sticky are positioned by arranging elements relative to its current position, its containing element, or the browser view port. For all of these values, except static, the top, right, bottom, or left properties must also be sued to specify the placement of the positioned elements. Let's look at how all of this works in a code pan example. We'll start with relative positioning. Let's scroll down to the relative class, down on line 19, and add in position relative. This is the only positioned element that stays in the layout flow, so we won't see any changes until we add at least one offset property. So, if I add a top value of 10 pixels, and a right value of 30 pixels, it will push the box 10 pixels away from the top of it's current position, and 30 pixels away from the right of it's current position. Relative positioning does not affect the flow of the other elements. Next, lets add in position absolute to the absolute class. Watch what happens to the fixed box. The fixed box was stacked below the absolute box, but has now moved behind it because the absolute box has been removed from the normal flow. The fixed box moved up to fill the empty spot. Let's add a width of 100 pixels to the fixed class. Now we can see the green coming from the fixed box behind it. Elements with absolute positioning are relative to it's closest positioned ancestor element. If that exists, it will be relative to the body element. And we haven't defined any offset properties yet, so the box is still sitting in the same spot. Let's add in a right and bottom property. So far I have been using pixels but we can use other units as well, such as percentage. The absolute box is currently positioned relative to the body, so it's 25% from the right, and 5 % from the bottom of the initial viewable area. And I say initial because if you scroll down, the box doesn't stay at 5% from the bottom of the page, it was 5% from the bottom when it was initially loaded. Most of the time, when using absolute, you'll want to contain the element to a certain area and we can do that by adding position to its container. Currently, it has two containing elements, this parent div and this wrapper div. Let's first add position to the wrapper. Any position value can be used but relative is a good choice here because it won't remove the wrapper from the natural page flow. Now it's 25% from the right, and 5% from the bottom of the wrapper container, shown with this black border. If I add a position relative to the parent box, it's going to change where this absolute box is relative to. Now the absolute box is positioned to this right box, the parent container because absolute is relative to its nearest positioned container. Now let's go down to the fixed class and add the fixed position style and the offset properties. Then try scrolling down the page. Fixed positioning is always positioned relative to the view port and stays in the same spot even on page scroll. It's removed from the normal flow and not affected by any positioned ancestor elements. Now let's look at the last one, the sticky positioning. This is the newest value and it's still in the draft phase and while it has full or partial support in most modern browsers, this is still experimental and not a recommendation yet. Let's scroll back to the top of the page so we can see the element and then we'll add in position sticky and a top value of 10 pixels. With sticky positioning, it stays in the initial spot until you scroll the page. Then it becomes fixed when the value in the offset property has been met. So in this example, that's 10 pixels from the top. So when I scroll the page, it's going to stay where it is until it gets to 10 pixels away from the top of the view port. And then it turns into fixed positioning. Once you scroll past it's containing element it will no longer be fixed. This is a pretty fun feature but again it's still in draft phase. You can check on it's status at caniuse.com. This WD here indicates that it's in the working draft stage. It may be tempting to use the position property for page layouts, since you can arrange them in specific positions. But positioning shouldn't be used in this way, since it takes the element out of the stacking order and the normal flow, with the exception of relative. Stick to using position for styling smaller page components such as a fixed navigation bar, rather than large page layout blocks.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts