Position
You might say
Pin this little icon to the top-right corner of the card so the rest of the layout doesn't affect it.
Place an element in normal flow, against a parent, or against the viewportCSS position decides how an element is placed and whether offsets such as top and left apply. Relative often creates a reference for an absolutely positioned child; fixed follows the viewport; sticky moves only within its scrolling context. Choose the mode from the relationship you need.
When to use it
- Anchor a badge to an icon
- Fix a floating control to the viewport
- Create a reference for an overlay inside a component
- Keep normal content in document flow by default
When NOT to use it
- Absolutely position the main page layout
- Use fixed coordinates that only fit one screen
- Remove content from flow without reserving its space
- Choose a position mode before identifying its reference box
Anatomy
anchortop: 0 · right: 0z-index: 1 · May cover other content
Absolute often determines the containing block from the nearest positioning ancestor; transform, contain, etc. may also create a containing block. If it cannot be found, refer to the initial containing block. Do not call it body in general.
Only if the position is not static can you use offset
top / right / bottom / left, determine how far away from each side of the reference object
z-index can be used to position elements and flex/grid children; compare the stacking context first, and then compare the values
Variants
Static
static
This is it by default, queuing with the document flow
Relative
relative
Fine-tune the position, or use anchor points for child elements
Absolute
3
Corner floating layer, relatively recent positioning ancestor
Fixed
Floating button and pin operation, scrolling does not follow
Sticky
The meter header and navigation scroll to the set position and then snap.
Typical use cases
Badge on avatar
Design Crew
New homepage draft just dropped
Vibe Assistant
Your page is live now
Floating button
Popover anchor
Sticky toolbar
Members
MayaAdmin
AlexGuest
All roles ✓
Admin
Editor
Further reading