Course Index

CSS · Module 18 · Lesson 22 of 48

Relative & Absolute Position

What are Relative & Absolute Positions?

  • position: relative: Imagine standing in a line. You take two steps to your right. You have moved, but your position is still calculated relative to where you were originally standing.
  • position: absolute: Imagine breaking out of the line completely. You float up and pin yourself to the exact top-right corner of the classroom wall, ignoring the line of students below.

    • In CSS:

  • relative: Keeps the element in the normal document layout flow, but allows you to nudge it around using top, bottom, left, or right offset values.
  • absolute: Decouples the element from the document flow completely (adjacent elements act as if it doesn't exist). It positions itself relative to the closest parent container that has its position set (e.g. has position: relative;). If no positioned parent exists, it positions itself relative to the browser window.

    • Why does it matter?

    This coordinates pair is essential for overlapping layouts. For example, placing a "Sale" badge on top of a product image card requires setting the card wrapper to position: relative; and the badge element to position: absolute; top: 10px; right: 10px;.

    Syntax Breakdown

  • position: relative; — Establishes offset ability and acts as a coordinates anchor for absolute child elements.
  • position: absolute; — Plucks element from layout flow.
  • top: 0; left: 0; — Pins absolute elements to parent boundaries.

    • Top Right

    Common Mistakes

  • Forgetting position: relative on the parent: If you write position: absolute; on an element but forget to add position: relative; to its parent container, the child element will fly out of the card and align itself to the top of the entire webpage!

    • Quick Reference

  • position: relative — Baseline positioning + parent anchor.
  • position: absolute — Coordinates-based positioning relative to parent anchors.
  • top, bottom, left, right — Offset distance properties.
    • Your Task
    1. Position the `.child` element absolute by writing `position: absolute;`. 2. Force it to stick to the bottom-left corner of the parent by setting both `bottom` and `left` properties to `0`.
    index.html
    Type code above to start the lesson.
    Live Preview