Five positioning schemes
The position property changes how a box is placed and what the offset properties top, right, bottom, and left mean. The default keeps elements in normal flow, while other values pull them out or anchor them to scrolling.
- static is the default and ignores offsets.
- relative keeps flow space but shifts the box by its offsets.
- absolute removes the box from flow and positions it against the nearest positioned ancestor.
- fixed positions against the viewport so it stays during scroll.
- sticky acts relative until a scroll threshold, then sticks.
Choosing a containing block
For absolute and fixed elements, offsets are measured from a containing block. Absolute boxes look up the tree for the nearest ancestor whose position is not static. Fixed boxes use the viewport unless a transformed ancestor traps them. Setting position relative on a parent without offsets is a common trick to create that anchor.
- A relative parent is a frequent anchor for absolute children.
- Sticky needs a scroll container and a threshold offset to engage.
Key idea
Position selects a placement scheme, and absolute and fixed boxes resolve their offsets against a containing block you usually create with a positioned ancestor.