Relative positioning is CSS’s small nudge tool. Set `position: relative` on an element, then use an offset such as `top` or `left` to move how it appears. Unlike absolute or fixed positioning, the element keeps its original place in normal page flow—its old spot is still reserved, even after the element wanders off a little. section 8.7 section 8.8
element {
position: static|relative|absolute|fixed|sticky;
top: measurement|percentage|auto;
right: measurement|percentage|auto;
bottom: measurement|percentage|auto;
left: measurement|percentage|auto;
z-index: integer|auto;
}
Use `position` to choose a positioning mode, offset properties to shift it, and `z-index` when overlapping elements need a front-to-back order. section 8.7
Think of the original layout spot as a parking space: relative positioning moves the car, but the empty space stays put. That preserved gap can look odd, so relative positioning is usually not the main tool for arranging an entire page. Its especially useful job is making a nearby positioning context for an absolutely positioned child. section 8.8 section 20.5
PLAY: build a relative shift one piece at a time:
- Start with `position: relative;`. Without it, a normally static element ignores `top`, `right`, `bottom`, and `left`. section 8.7
- Add an offset such as `top: 3em;`. A positive `top` value shifts the element downward; a negative `top` value shifts it upward. section 8.8
- Choose a measurement such as `px`, `em`, `rem`, `vw`, `vh`, a percentage, or `auto` for an offset value. section 8.7
- Inspect the surrounding layout. The shifted element may overlap nearby content while its original space remains empty. section 8.8
A span that drops without taking its gap along
`span { position: relative; top: 3em; border: 2px solid blue; }` moves the span down by 3em. The surrounding line still leaves room where the span began, which makes the effect easy to spot—and demonstrates why a visual nudge can create a slightly weird-looking hole. section 8.8
Preparing an image overlay
A portfolio image wrapper uses `position: relative;`. An after-image inside it can then use `position: absolute; left: 0; top: 0;` to sit at the wrapper’s top-left corner. `z-index: 1` places that overlay above the before-image, while opacity and a hover transition reveal it. section 20.5
REMEMBER: relative positioning changes an element’s visual location, not its claim on layout space. For a simple nudge, that behavior is the point. For a child that must be pinned inside a container, it also gives absolute positioning a dependable place to work from. section 8.7 section 20.5
