MP Web Studio
CSS100 of 100 available
49 / 100

LESSON 49 OF 100

Create a positioning reference

Turn a card into the reference block for a positioned child.

Official sourceW3C CSS Positioned Layout — position: relativeReviewed: 2026-08-26
STEP 1 · LEARN

How it works

position: relative keeps the element in normal flow and makes it the reference block for absolutely positioned descendants. Without offsets, the card does not move.

Correct example
.card { position: relative; }

The card stays in flow but can later anchor an internal badge.

Common mistake
.card { position: static; }

static is the initial value and does not create the requested reference block for an absolute child.

STEP 2 · APPLY

Your exercise

Complete the rule for .card with position: relative.

STEP 3 · BUILD

Write and see the result

index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The position declaration uses relative.
  • The target element is present on the page.
Explain the solution logic

The selector identifies the element, and position: relative applies the exact requested behaviour.