position: static — the default you've always had

A property behind everything, named for the first time

Every element in every course so far, under normal flow or flexbox, shared one setting you never wrote: position: static. It's the default value of a property this course finally names.

.box {
  position: static; /* the default, stated explicitly */
}

What static means

A static element follows normal flow, as the CSS layouts and flexbox courses described. position does something new. It decides whether an element can leave that flow and be placed somewhere on purpose. static means "no", and it's the default because most elements belong where the flow puts them.

The offset properties do nothing on static

CSS has four offset properties, top, right, bottom and left, that move a positioned element away from a reference point. On a position: static element, all four are ignored.

.box {
  position: static;
  top: 50px;    /* has no effect at all */
  left: 20px;   /* has no effect at all */
}

There's no error or warning. The browser just doesn't read them until position is something other than static. That's the mechanism this course is built on: position is the switch, and the offsets are controls that only respond once it's on.

Four switches, not one

position has four non-static values. This course covers relative, absolute and fixed in their own lessons. The fourth, sticky, is a hybrid: it acts like relative until scrolling reaches its offset, then sticks in place like fixed while its container is on screen. Each value answers "out of the flow or not, and positioned against what?" differently.

static    → normal flow, offsets ignored (the default)
relative  → normal flow, offsets nudge it from its own position
absolute  → removed from flow, offsets position it against an ancestor
fixed     → removed from flow, offsets position it against the viewport

Why this course exists alongside flexbox

position and display: flex aren't competitors; they solve different problems. Flexbox arranges siblings relative to each other, like a row of cards or a navbar's links. Positioning pulls one element out of that arrangement: a tooltip that shouldn't push its neighbors, a badge over a card's corner, a header that stays put while the page scrolls. Real interfaces use both, and this course's final lesson combines them.

What this course covers

• Lesson 1, position: static: the default every element has had all along (you are here)
• Lesson 2, position: relative: nudging an element while it keeps its place in the flow
• Lesson 3, position: absolute: removed from flow, positioned against an ancestor
• Lesson 4, The positioning context pattern: relative and absolute working together
• Lesson 5, position: fixed: anchored to the viewport, ignoring scroll
• Lesson 6, z-index and stacking order: deciding which overlapping element is on top
• Lesson 7, Putting it together: a card with a badge, a dropdown and a fixed header

By the end, you'll know which value to use when an element needs to break away from the layout rules so far.