ReviseAlgo Logo

CSS Basics

Position

Master CSS positioning, covering static, relative, absolute, fixed, and sticky document flow layout offsets.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master element positioning. By the end of this topic, you will be able to:

  • Differentiate between the five positioning values (static, relative, absolute, fixed, and sticky).
  • Understand containing blocks and how absolute positioning coordinates are calculated.
  • Implement sticky sidebars and navigation headers that lock inside container boundaries.
  • Manipulate element positioning offsets using top, right, bottom, and left properties.

2. Overview

The position property specifies the positioning model used for an element. Positioning values allow you to remove elements from the normal document layout flow, offset them relative to their parent container, lock them to the browser viewport window, or trigger sticky scroll thresholds.

3. Why This Topic Matters

Positioning determines how elements stack and layout in 2D space. Incorrect configurations lead to positioning bugs:

  • Unbounded Absolute Placement: Setting an element to position: absolute without defining a positioned parent container causes it to calculate coordinates relative to the root body. This breaks component layouts when the page resizes.
  • Sticky Element Failures: Developers often declare position: sticky but forget to specify a required offset coordinate (e.g. top: 0). Without this, the element behaves like a static container.

4. Real-World Analogy

Think of layout positioning like **organizing people in a theater auditorium**:

  • Static (Normal Seating): Finding seats one after another in order of arrival. You cannot shift from your assigned coordinates.
  • Relative (Leaning): Sitting in your assigned seat, but leaning slightly left or right. You occupy the same seat space, but your head is shifted temporarily.
  • Absolute (Moving within the row): Leaving your seat to sit on the lap of the person at the start of your row (the positioned parent container). You calculate your position relative to that row's starting boundary.
  • Fixed (The Security Camera): A camera bolted to the ceiling of the auditorium. No matter where guests walk or how rows shift, the camera stays locked in the same spot from the viewer's perspective.
  • Sticky (The Usher): An usher who walks down the aisle alongside a group of guests. Once they reach the front stage railing (the scroll threshold boundary), the usher stops and remains locked at the railing while the guests continue moving past.

5. Core Concepts

Positioning Mode Document Flow Impact Containing Reference coordinates
static Keeps the element in the normal document layout flow. (Default value). Ignores top, right, bottom, left offsets.
relative Keeps the element in the normal flow, but offsets it without affecting surrounding elements. Calculates offsets relative to the element's own default position.
absolute Removes the element from the document flow. Surrounding elements fill the empty space. Calculates offsets relative to the nearest positioned ancestor (an ancestor with a position other than static). Defaults to the viewport.
fixed Removes the element from the document flow. Calculates offsets relative to the browser viewport window. Remains in place during scrolling.
sticky Behaves like relative positioning until the scroll offset threshold is met, then locks in place like fixed positioning. Calculates offsets relative to its nearest scrolling ancestor. Must define an offset coordinate (e.g. top: 0).

6. Syntax & API Reference

Below is the typical CSS configuration for creating a positioned overlay card layout:

7. Visual Diagram

This diagram displays how absolute, fixed, and sticky containing reference frames resolve coordinate offsets:

8. Live Example — Full Working Code

A sample HTML file showing absolute overlay tags, a sticky header, and fixed feedback badges:

9. Interactive Playground

Try It Yourself Challenges:

  1. Remove position: relative from the card wrapper element class and observe how the absolute badge moves to the bottom-right of the viewport body.
  2. Change the sticky header container offset coordinate to top: 20px and verify the layout scroll behavior.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Unbounded absolute child elements Forgetting to set position: relative on the parent container, causing the absolute child to align relative to the body. child absolute, parent default static Set parent: position: relative; child: position: absolute;
Sticky element missing coordinates Forgetting to define top, bottom, left, or right offset coordinates on a sticky element, causing it to remain static. position: sticky; (no top/bottom defined) position: sticky; top: 0;

11. Best Practices

  • Always set position: relative on parent containers: When using absolute positioning, declare position: relative on the parent wrapper container to keep coordinates bounded.
  • Set offset coordinates on sticky elements: Always define at least one offset coordinate property (e.g. top: 0 or bottom: 0) on sticky elements, otherwise the sticky behavior will not work.
  • Keep fixed elements minimal: Use fixed positioning sparingly since fixed elements take up valuable viewport space and can obscure content on small screens.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
static, relative, absolute, fixed Supported Supported Supported Supported
position: sticky Supported (56+) Supported (32+) Supported (8+) Supported (16+)

13. Interview Questions

🟢 Q1: How does absolute positioning resolve coordinates compared to relative positioning?

Answer: relative offsets calculate coordinates relative to the element's default position in the document flow, without affecting surrounding elements. absolute positioning removes the element from the normal layout flow and calculates offsets relative to its nearest positioned ancestor (an ancestor with a position value other than static).

14. Debugging Exercise

Identify and fix the positioning bugs in this card badge overlay:

View Solution

Diagnosis: The .close-btn element is set to position: absolute, but the parent alert card has default static positioning. As a result, the close button aligns to the top-right corner of the page viewport instead of the alert card. To fix this, change the alert card to position: relative.

Fixed CSS:

15. Practice Exercises

Exercise 1: Floating Action Button

Build a customer service floating action button that stays fixed in the bottom-right corner of the screen when users scroll.

16. Scenario-Based Challenge

The Sticky Sidebar Scroll Challenge:

An online documentation site features a long article page and a sidebar navigation menu. When the user scrolls down the page, the sidebar disappears, forcing them to scroll back to the top to navigate to other chapters. Explain how to implement a sticky sidebar navigation menu using CSS positioning.

17. Quick Quiz

Q1: Which position value positions elements relative to the browser viewport, keeping them locked in place during scroll?

A) relative

B) fixed

C) sticky

Answer: B — Fixed positioning locks elements relative to the browser viewport window.

18. Summary & Key Takeaways

  • • Absolute positioning resolves coordinate offsets relative to the nearest positioned parent container.
  • • Sticky elements require both position: sticky and defined offset coordinates to lock in place.

19. Cheat Sheet

Position type Containing reference point
fixed The browser viewport window.