Understanding CSS Positioning

The position property changes how an element is placed in the document. It works together with the top, right, bottom, and left offset properties to move elements from their default position.

position: static (Default)

Every element has position: static by default. Static elements follow the normal document flow — they appear in the order they exist in the HTML.

CSS

.element {
  position: static;
  /* top, right, bottom, left have NO effect */
  /* z-index has NO effect */
}

Static elements ignore the top, right, bottom, left, and z-index properties.

position: relative

Relative positioning moves an element from its normal position without removing it from the document flow. The space it originally occupied is preserved.

CSS

.element {
  position: relative;
  top: 20px;   /* Moves DOWN 20px from normal position */
  left: 30px;  /* Moves RIGHT 30px from normal position */
}

Key Characteristics

Element moves relative to its own original position
Space is preserved — other elements act as if it hasn't moved
Creates a new stacking context for z-index
Establishes a containing block for absolutely positioned children

Common Use: Positioning Container

CSS

.card {
  position: relative; /* Now serves as anchor for absolute children */
}

.card .badge {
  position: absolute;
  top: -10px;
  right: -10px;
}

position: absolute

Absolute positioning removes an element completely from the document flow and positions it relative to its nearest positioned ancestor (an ancestor with position: relative, absolute, fixed, or sticky).

CSS

.parent {
  position: relative; /* Creates positioning context */
}

.child {
  position: absolute;
  top: 0;
  right: 0;
  /* Positioned at top-right corner of .parent */
}

Key Characteristics

Element is removed from normal flow — no space is reserved
Positioned relative to nearest positioned ancestor (or the viewport if none exists)
Element shrinks to fit its content unless width/height is set
Other elements ignore it as if it doesn't exist

Common Patterns

CSS

/* Overlay on parent */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

/* Badge on a card */
.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centering with absolute */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

position: fixed

Fixed positioning positions an element relative to the viewport (browser window). The element stays in place even when the page scrolls.

CSS

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Key Characteristics

Element is removed from normal flow
Positioned relative to the viewport
Stays in place during scrolling
Common for navigation bars, floating action buttons, and modals

Common Patterns

CSS

/* Fixed header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 100;
}

/* Compensate for fixed header */
body {
  padding-top: 60px;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
}

/* Full-screen modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

position: sticky

Sticky positioning is a hybrid of relative and fixed. The element acts as relative until it reaches a specified scroll position, then becomes fixed.

CSS

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Key Characteristics

Element stays in normal flow until the scroll threshold
Becomes fixed when it reaches the specified offset
Stops being fixed when its parent scrolls out of view
Requires at least one of top, right, bottom, or left to be set

Common Patterns

CSS

/* Sticky table header */
thead th {
  position: sticky;
  top: 0;
  background: #2c3e50;
  color: white;
}

/* Sticky sidebar */
.sidebar {
  position: sticky;
  top: 80px; /* Below the fixed header */
  align-self: flex-start;
}

/* Sticky section headers */
.section-title {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  padding: 0.75rem 1rem;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

Sticky Requirements

For sticky positioning to work, the parent element must:

Not have overflow: hidden or overflow: auto
Have enough content to scroll
Not be the immediate scrolling container unless intended

The CSS Inset Property

inset is a shorthand for top, right, bottom, and left:

CSS

/* These are equivalent */
.overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.overlay {
  inset: 0;
}

/* Different values: top right bottom left */
.element {
  inset: 10px 20px 10px 20px;
}

Z-Index and Stacking

Positioned elements can overlap. Use z-index to control stacking order:

CSS

.back { position: relative; z-index: 1; }
.middle { position: relative; z-index: 2; }
.front { position: relative; z-index: 3; }

z-index only works on positioned elements (not static).

Summary

CSS offers five position values: static (default flow), relative (offset from normal position), absolute (positioned within a container), fixed (locked to viewport), and sticky (hybrid relative/fixed). Understanding positioning is essential for creating overlays, fixed navigation, sticky headers, tooltips, and complex layouts.