Positioning Techniques

All in one: every display and position value, side by side

What this example compares

Normal flow: block boxes (<div>) stack down vs inline boxes (<span>) share a line and wrap like words
What kind of box: display: inline vs inline-block vs block, plus flex and grid on the parent
Hiding: display: none (no space) vs visibility: hidden (the hole stays)
The ruler: position: static vs relative vs absolute, and the value that does not exist, center
From which edge: top vs right vs bottom vs left
The anchor: an absolute badge in a static parent vs a position: relative parent vs negative offsets
Staying in view: fixed vs sticky; top: 0 vs sticky with no offset vs sticky under overflow: hidden
Who is on top: HTML order vs z-index vs z-index on a static box
Choosing a technique: absolute for a row of cards (wrong) vs display: flex, and the four-way decision guide
Project step 8: Asha Kumar's profile with a sticky header (z-index: 10) and a "Featured" corner badge

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see ten panels (scroll inside the result to reach them all), and a dark "Back to top" button that stays in the bottom-right corner of the result however far you scroll. Panel 1 shows three grey boxes stacked and three orange words in a line. In panel 2 only the inline span ignores its width and its padding overlaps the lines around it. In panel 3 box B is missing in the middle card and leaves an empty hole in the last one. In panel 4 the orange box stays put, moves while leaving a gap, jumps on top of the first box, and stays put again. Panel 5 shows a dark tag in each corner. In panel 6 the first red badge sits in the corner of the dashed frame, not its own card, and the third hangs over its card's corner. In panel 7 only the second window keeps "Courses" at the top when you scroll inside it. Panel 8 shows green, then orange, then orange again on top. In panel 9 the absolute tiles pile up on one spot below a collapsed strip, while the flex tiles sit in a row. Panel 10 is Asha Kumar's profile, whose header stays while the cards scroll under it. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 6, the first and second cards have exactly the same badge rule. Why does the first badge end up in the corner of the dashed frame instead of its own card?

Because absolute measures from the nearest positioned ancestor. The first card's course box is static, so the browser looks further out and finds the dashed frame, which has position: relative. Adding position: relative to the course box (as in the second card) makes it the anchor and brings the badge home.