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.
You can say this to an AI Agent
Make each product card the positioning reference and place its badge absolutely at the card's top-right, without viewport-based fixed coordinates. Test varied card heights, grid column changes, and page scrolling.
When to use it
- Anchor a badge to an icon3
- Fix a floating control to the viewport＋
- Create a reference for an overlay inside a componentFilter bar · sticky at top
- Keep normal content in document flow by defaultAll statesAll statesIn progress
When NOT to use it
- Absolutely position the main page layoutBadge flies into the cornerWithout relative on the card, absolute positioning is relative to the body.
- Use fixed coordinates that only fit one screenz-index: 99, but no position is set
- Remove content from flow without reserving its spaceFixed barfixed removes the bar from document flow and covers the first line of content.
- Choose a position mode before identifying its reference boxtop:6 left:8top:18 left:62top:42 left:28Hard-coded coordinates break as soon as content gets longer.
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check