Styling & Design
Position & layering
Pin elements in place, overlap them, and control which sits on top — using position, offsets, and z-index. An advanced but powerful sector.
Last updated 2026-06-29
Most elements flow down the page one after another. Positioning lets you break out of that flow — to pin a header to the top of the screen, place a badge on the corner of a card, or float a "back to top" button. These controls live in the Position sector.
Positioning is powerful but easy to overuse. For arranging elements, prefer flexbox & grid first; reach for positioning only when something genuinely needs to sit on top of or outside the normal flow.
The position modes
The Position control has five settings:
| Mode | What it does |
|---|---|
| Static | The default — the element sits in normal flow. Offsets have no effect. |
| Relative | Stays in flow, but you can nudge it from its normal spot with offsets. Also makes it an anchor for absolute children. |
| Absolute | Removed from flow and placed relative to its nearest positioned ancestor. Use for badges, tags, and overlays pinned to a corner. |
| Fixed | Pinned to the browser window — it stays put as the page scrolls. Use for floating buttons. |
| Sticky | Flows normally until it would scroll off-screen, then "sticks" in place. Perfect for a header that stays visible while scrolling. |
The sector reminds you: most offset and layering properties only take effect once position is not static.
Offsets: top, right, bottom, left
Once an element is relative, absolute, fixed, or sticky, the top / right / bottom / left values control where it sits. For example, an absolutely-positioned "Sale" badge with top: 8px and right: 8px tucks neatly into a card's top-right corner.
Z-index: what's on top
When elements overlap, z-index decides the stacking order — higher numbers sit in front of lower ones. If a sticky header is being covered by content scrolling over it, give the header a higher z-index. You'll mostly use small numbers (1, 10, 100).
Float (legacy)
The Float control pushes an element to the left or right and lets text wrap around it (like an image beside a paragraph). It's an older technique — flexbox and grid usually do the job better — but it's here when you need it.
Common recipes
- Sticky header: set the header's position to sticky with
top: 0, and a z-index high enough to stay above the page. - Corner badge: give the card relative position and the badge absolute position with small
top/rightoffsets. - Floating button: set a button to fixed with
bottomandrightoffsets so it stays in the corner as visitors scroll.
Check every device. Positioned elements can overlap text on smaller screens. After positioning something, review it on Tablet and Mobile.
Where to go next
- Layout: flexbox & grid — the first tool to reach for.
- Effects & shadows — transforms also move elements visually.