Lesson 8 / 28

The position Property

Q: An `absolute` element positions itself relative to what?

Its nearest positioned ancestor. It looks up the tree for the closest ancestor with position other than static; if none, it falls back to the viewport.

static, relative, absolute, fixed, and sticky positioning.

Five values

static default flow. relative shifts from its normal spot, space still reserved. absolute removed from flow, placed relative to nearest positioned ancestor. fixed relative to the viewport. sticky toggles between relative and fixed on scroll.

Absolute inside relative

The classic pattern: a relative parent gives an absolute child a reference box.

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

sticky explained

position: sticky with top: 0 acts normal until its scroll position reaches the threshold, then it "sticks" — great for section headers and table headers.

Quick check: An `absolute` element positions itself relative to what?

The viewport, always
Its nearest positioned ancestor
Its immediate sibling

Answer

Its nearest positioned ancestor — It looks up the tree for the closest ancestor with position other than static; if none, it falls back to the viewport.