CSS `position` Property

Theory & Deep Explanation

The position property in CSS is fundamental for controlling layout, stacking, and advanced UI effects. It determines how an element is placed in the document, how it interacts with other elements, and how it responds to scrolling and resizing. Understanding each value is key to mastering modern web design.

static: Default. Element follows the normal document flow. Offsets (top/right/bottom/left) and z-index have no effect.
relative: Element is positioned relative to its normal spot. Offsets move it visually, but its original space is preserved. Useful for fine-tuning or as a reference for absolutely positioned children.
absolute: Removed from the normal flow and positioned relative to the nearest ancestor with a position other than static. Great for overlays, tooltips, and dropdowns.
fixed: Removed from flow and positioned relative to the viewport. Stays visible during scroll. Used for sticky navbars, notifications, or floating buttons.
sticky: Acts as relative until a scroll threshold, then becomes fixed at the specified offset. Perfect for sticky headers, menus, or call-to-action boxes.

static

relative

absolute

fixed

sticky

Real-World Use Cases

static: Most content blocks, paragraphs, and lists.
relative: Nudge icons, badges, or create a reference for absolutely positioned children.
absolute: Dropdown menus, popovers, tooltips, modals, and image overlays.
fixed: Sticky navbars, floating action buttons, persistent notifications.
sticky: Section headers, table headers, floating call-to-action bars.

Accessibility & Best Practices

Use position: relative for layout tweaks and as a positioning context for children.
Use absolute and fixed for overlays, tooltips, and UI elements that must float above content.
Test on different screen sizes and with keyboard navigation. Ensure overlays and tooltips are accessible.
Use z-index to manage stacking order, but avoid excessive stacking contexts.

Code Examples

/* Overlay Example */
.overlay-demo {
  position: relative;
}
.overlay-demo .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(52,152,219,0.15);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

/* Tooltip Example */
.tooltip-demo {
  position: relative;
}
.tooltip-demo .tooltip {
  position: absolute;
  bottom: 120%; left: 50%;
  transform: translateX(-50%);
  background: #23272e; color: #fff;
  padding: 6px 14px; border-radius: 6px;
  font-size: 0.98rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
  z-index: 3;
}
.tooltip-demo:focus-within .tooltip,
.tooltip-demo:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Sticky Header Example */
.sticky-header {
  position: sticky;
  top: 0;
  background: #3498db;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
  z-index: 10;
}

Interactive Demos

static

Static (default)

Follows normal flow. No offset or stacking.

relative

Relative (moved)

Moved visually, but space is preserved.

absolute

Parent (relative)

Child (absolute)

The yellow child is position: absolute inside a position: relative parent. It is placed at top: 12px; right: 12px of the parent.

Parent (static)

Child (absolute)

The orange child is position: absolute inside a static parent. It is placed at top: 12px; left: 12px of the page (initial containing block).

fixed

Fixed (scroll me!)

Stays visible on scroll. Try the notification.

sticky

Sticky (scroll inside)

Scroll down to see the header stick to the top of this card. The sticky header will highlight when it becomes fixed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur.

Aliquam erat volutpat. Etiam nec velit nec nulla dictum dictum. Suspendisse potenti.