position

static is normal flow. relative nudges an element and makes it the frame for absolute children. absolute pins to that frame. fixed pins to the screen; sticky is normal until it reaches an edge, then holds.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Badges on cards, dropdowns under buttons, headers that stay: all position. The most common bug is an absolute element measured from the page because nobody gave it a frame.

How to think about it

Before position: absolute, put position: relative on the parent that should be the frame. Then top, right, bottom, left say where inside it.

Worked example

<div class="card"><span class="badge">New</span>Card</div>

A card with a badge inside it.

.card { position: relative; width: 200px; height: 100px; border: 1px solid rgb(0, 0, 0); }

relative makes the card the frame for its absolute children.

.badge { position: absolute; top: 0; right: 0; }

Pinned to the card's top-right corner, not the page's.

Your turn

Make the card the frame for its absolute children.

.card { position: ; }

The trap

An absolute element that lands in the top corner of the page. No ancestor is positioned, so it measured from the page. Add position: relative to the parent.

Practise position on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.