static
Default. The element participates in normal flow.
Platform under construction
Positioning
Positioning moves elements out of ordinary flow relationships. It is powerful for badges, overlays and anchored UI, but it can break layout when overused.
.card { position: relative; }
.badge { position: absolute; inset: 1rem 1rem auto auto; }
Layout
Positioning should anchor details, not build whole pages.
The default position is static. An element stays in normal flow. position: relative keeps the element in flow but can offset it and create a containing block for absolute children.
position: absolute removes an element from normal flow and positions it relative to its nearest positioned ancestor.
position: fixed pins an element to the viewport. These tools are useful, but they should not replace layout systems like flex and grid.
relative
Keeps its space but can become an anchor for absolute children.
absolute
Removed from flow and positioned within a containing block.
fixed
Pinned to the viewport, often used for overlays or floating controls.
Visual model
Layout is easier when you can name the relationship.
Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.
position: relative
Creates the containing block.
position: absolute
Anchored to the parent corner.
normal flow
Still controls the card layout.
position: fixed
Pinned independent of document flow.
Examples
Use the layout tool that matches the shape of the problem.
Badge anchored to a card
.card { position: relative; }
.badge {
position: absolute;
inset-block-start: 1rem;
inset-inline-end: 1rem;
}
Page layout with absolute positions
.header { position: absolute; top: 22px; left: 80px; }
.main { position: absolute; top: 180px; left: 260px; }
.footer { position: absolute; top: 940px; left: 80px; }
Rules that matter
Strong layout CSS stays readable when the screen changes.
Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.
Use relative as an anchor
A positioned parent gives absolute children a clear reference.
Use absolute for details
Badges, icons and overlays are good positioning use cases.
Do not build whole pages with absolute
Flow, flex and grid are safer for page structure.
Use logical inset when possible
inset-block and inset-inline adapt better to writing modes.
Watch stacking context
Positioned elements may interact with z-index.
Test responsive behavior
Offsets that look good on desktop may fail on mobile.
Production thinking
Layout quality shows up when content stops being perfect.
Why does this matter?
Positioning lets you attach visual details precisely, but it bypasses some natural layout behavior.
Accessibility
Positioned content should not cover controls, hide focus states or create confusing reading order.
Production note
Use positioning for anchored UI details, modals, tooltips and fixed controls. Keep main layout in flow, flex or grid.
SEO note
Positioning does not change meaning, but hidden or overlapping content can hurt user experience.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Remove position: relative from .card and see where the badge anchors.
- Change inset-inline-end to inset-inline-start.
- Try position: fixed on the badge and explain the difference.
Practice assignment
Do this before moving to the next lesson.
- Create a card with a positioned badge.
- Use relative on the parent and absolute on the child.
- Explain why the main card should stay in normal layout.
Try it yourself
Anchor a badge inside a card
Self-check
Before you continue, prove that you understand Positioning.
Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.
- Can you explain static, relative, absolute and fixed?
- Can you identify the containing block for an absolute element?
- Can you avoid absolute positioning for whole page layout?
- Can you use logical inset properties?
- Can you test overlap on narrow screens?
Senior audit upgrade
Containing blocks explain most absolute positioning bugs.
Absolutely positioned elements look for a positioned ancestor. Fixed elements can also behave differently on mobile when transforms or viewport UI are involved.
Positioned parent
Use position: relative on the intended parent before placing an absolute child.
Mobile fixed
Test fixed headers and buttons on real mobile sizes, including browser chrome changes.
Avoid layout replacement
Do not use absolute positioning for ordinary document layout.