Out of the flow
A "New" badge on a card's corner, a header that stays on screen while you scroll, a chat button floating in the corner — these break out of normal flow with the position property.
Position values
- relative — stays in flow; becomes the anchor for absolute children.
- absolute — removed from flow, placed with top/right/bottom/left inside the nearest positioned ancestor.
- fixed — pinned to the screen (stays put when scrolling).
- sticky — scrolls normally until it reaches a threshold (e.g. top: 0), then sticks.
- z-index decides what's on top when positioned things overlap.