LESSON 16

Positioning

Learning objective: Place elements precisely with the position property.

Understand

Positioning lets you move elements out of normal flow.

static is the default. relative nudges an element from its normal spot. absolute positions relative to the nearest positioned ancestor. fixed sticks to the viewport, and sticky toggles between relative and fixed while scrolling.

Analogy: Positioning is like pinning a note: relative shifts it slightly, fixed pins it to the screen no matter how you scroll.

See It in Action

A badge pinned to a card corner:

.card { position: relative; }
.badge {
  position: absolute;
  top: 8px; right: 8px;
}
How it works: The card is relative so it becomes the reference; the badge is absolute, placed 8px from the card's top-right corner.

Try It Yourself

  1. Make a header position: fixed and scroll.
  2. Pin a badge to a card corner with absolute.
  3. Try position: sticky on a section title.

Quick Quiz

Which position sticks an element to the viewport?

Challenge

Add a fixed navigation bar and a badge pinned to a card.

Success condition: Your nav stays on screen while scrolling and the badge sits in the corner.