Intermediate HTML and CSS

Positioning

By now you have had quite a bit of practice moving elements around the screen using things like margin, padding, and flexbox. These techniques have all relied on CSS’s default “positioning-mode”. This default positioning-mode is intuitive, and you’ll continue using it for almost all of your layout needs. However, there are other methods at your disposal that can be very useful in some situations.

Learning Outcomes

• You’ll learn how to use absolute positioning.
• You’ll learn how to use fixed positioning.
• You’ll learn how to use sticky positioning.
• You’ll know the difference between each property and how to combine them.

Static and Relative Positioning

The default positioning mode that you’ve gotten used to is position: static. The difference between static and relative is fairly simple. Static is the default position of every element, and properties top, right, bottom, and left do not affect the position of the element. Relative on the other hand is pretty much the same as static, but properties top, ri....(etc.) displace the element relative to its normal position in the flow of the document.

Absolute Positioning

position: absolute allows you to position something at an exact point on the screen without disturbing the other elements around it. More specifically, using absolute positioning on an element will remove that element from the normal document flow while being positioned relative to an ancestor element. To put it in simple terms: elements that are removed from the normal flow of the document don’t affect other elements and are also not affected by other elements. Using absolute positioning allows you to position elements anywhere on the screen using top, right, bottom, and left properties. This property is really useful when you want to position something at an exact point on the screen, without disturbing any of the other elements. A couple of good use cases for absolute positioning are:

• modals
• image with a caption on it
• icons on top of other elements

In the following example, we are using absolute positioning to display text over an image.

See the Pen Absolute Position | CSS Positioning by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Disclaimer: absolute positioning has very specific use cases and if possible, using flexbox or grid should be prioritized. Absolute positioning shouldn’t be used to do entire page layouts.

Fixed Positioning

Fixed elements are also removed from the normal flow of the document and are positioned relative to the viewport. You basically use top, right, bottom, and left properties to position it, and it will stay there as the user scrolls. This is especially useful for things like navigation bars and floating chat buttons. We have one of those at the very bottom right corner of the screen!

Sticky Positioning

Sticky elements will act like normal elements until you scroll past them, then they start behaving like fixed elements. They are also not taken out of the normal flow of the document. It might sound confusing, but checking out the behavior of this example might clear things up for you. It’s useful for things like section-headings. Remember being able to still see what category you’re looking at while scrolling through a shop? This is how it’s done!

Assignment

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

• What is the difference between static and relative positioning?
• What is absolute positioning useful for?
• What is the difference between fixed and sticky positioning?

Additional Resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• It looks like this lesson doesn’t have any additional resources yet. Help us expand this section by contributing to our curriculum.