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.
- 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.
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
left do not affect the position of the element. Relative on the other hand is pretty much the same as static, but properties
right...(etc.) displace the element relative to its normal position in the flow of the document.
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
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:
- 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.
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 elements are also removed from the normal flow of the document and are positioned relative to the
viewport. You basically use
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 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!
- This video is fast-paced but provides a good visual representation of different positioning behaviors. Go ahead and watch it.
- This MDN article covers all of the conceptual details about positioning.
- This CSS Tricks page should give you a different insight on the topic. You should read it as well.
- Finally, this article discusses the difference between fixed and sticky positioning, it’s a great read to understand the difference better.
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.
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- Understand the CSS Position Property With Practical Examples provides some different CSS methods for positioning elements.