CSCosmos

CSS Universe

Visual Learning

Back to CSS Universe

foundation

Positioning

Static, relative, absolute, sticky, and fixed positioning with stacking context examples.

positionstacking-context
Explore visualizers

Learning checklist

  • Containing blocks
  • z-index and stacking contexts
  • Sticky thresholds

Definition

Static, relative, absolute, sticky, and fixed positioning with stacking context examples.

Syntax

Containing blocks

Example

Use the visualizer below to apply these properties and see the result live.

Deep dive

Why this matters

Principles, mental models, and debugging clues tailored to the topic.

Visual intuition

Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.

Copy-ready CSS

Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.

Performance notes

Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.

Accessibility first

Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.

Practice

Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.

Tip: use DevTools overlays (grid/flex) plus the copy CSS button.

Interactive Lab

Positioning

Switch between static, relative, absolute, sticky, and fixed to see how offsets and stacking change.

Position: relative ยท offset: 20px

Try these

  • Switch between static/relative to see offsets applied on relative.
  • Try absolute: note it is positioned relative to the nearest positioned ancestor.
  • Try fixed/sticky and scroll to observe behavior (sticky respects threshold).
Positioned box (relative)

Observe stacking and flow changes as you toggle the position and offsets.

CSS
.card {
  position: relative;
  top: 20px;
  left: 20px;
}
HTML
<div class="stage">
  <div class="card">Positioned box (relative)</div>
</div>