Introduction

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.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • 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, right...(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 other words: 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.

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, so check out this sticky positioning example that 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

  1. Web Dev Simplified’s Learn CSS Position video is fast-paced but provides a good visual representation of different positioning behaviors. Go ahead and watch it.
  2. MDN’s docs on position covers all of the conceptual details about positioning.
  3. CSS trick’s page Absolute, Relative, Fixed Positioning should give you a different insight on the topic. You should read it as well.
  4. Finally, Kevin Powell’s article discusses the difference between fixed and sticky positioning. It’s a great read to understand the difference better.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

Additional resources

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

Support us!

The Odin Project is funded by the community. Join us in empowering learners around the globe by supporting The Odin Project!