Back to course

Lesson 46: Positioning Scheme: Absolute (Out of Flow)

CSS Mastery: From Zero to Hero in 100 Lessons

46. Positioning Scheme: Absolute (Out of Flow)

position: absolute completely removes the element from the normal document flow. The space it once occupied collapses, and other elements behave as if it was never there.

How Absolute Positioning Works

  1. Reference Point: An absolutely positioned element seeks the nearest ancestor (parent, grandparent, etc.) that has a non-static position (relative, absolute, fixed, or sticky). This ancestor is its reference point.
  2. No Reference Point: If no such ancestor exists, the element uses the initial containing block (the <html> or <body> element) as its reference point.
  3. Offset: The top, right, bottom, and left properties are then used to place the element relative to that reference point.

css /* HTML structure: / /

/ /
...
/ /
*/

.parent-relative { position: relative; /* Context setting */ width: 300px; height: 200px; border: 2px solid black; }

.child-absolute { position: absolute; top: 0; right: 0; /* Positions the child in the top-right corner of the parent */ width: 50px; height: 50px; background-color: red; }

Common Use Cases: Dropdown menus, tooltips, modal positioning, badges, and overlays.