Retour au cours

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

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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.