Understanding CSS Positioning

The CSS `position` property determines how an element is placed in the document. Combined with the `top`, `right`, `bottom`, and `left` properties, you can precisely control where elements appear on the page.

Static Positioning (Default)

Every element has `position: static` by default. Static elements follow the normal document flow and are not affected by top, right, bottom, or left properties.

CSS

.static-element {
  position: static;  /* Default - no need to set this */
  top: 50px;         /* Has NO effect on static elements */
  left: 100px;       /* Has NO effect on static elements */
}

Static elements simply appear in the order they are written in the HTML.

Relative Positioning

An element with `position: relative` is positioned relative to its normal position. It still takes up space in the normal flow, but you can offset it using top, right, bottom, and left.

CSS

.relative-box {
  position: relative;
  top: 20px;        /* Moves 20px DOWN from its normal position */
  left: 30px;       /* Moves 30px RIGHT from its normal position */
  background-color: #3498db;
  padding: 20px;
}

Key characteristics of relative positioning:

The element still occupies its original space in the document flow
Other elements behave as if the positioned element has not moved
Creates a positioning context for absolutely positioned children
The offset directions can be confusing: `top: 20px` pushes the element down

CSS

/* The gap where the element originally was remains */
.card {
  position: relative;
  top: -10px;   /* Shifts up 10px, but original space remains */
}

/* Common use: slight adjustments */
.icon {
  position: relative;
  top: 2px;     /* Align icon with text */
}

Absolute Positioning

An element with `position: absolute` is removed from the normal document flow. It is positioned relative to its nearest positioned ancestor (any ancestor with position set to relative, absolute, fixed, or sticky).

CSS

.parent {
  position: relative;  /* Creates positioning context */
  width: 400px;
  height: 300px;
  background-color: #ecf0f1;
}

.child {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #e74c3c;
  color: white;
  padding: 10px;
}

Key characteristics of absolute positioning:

Removed from normal flow: does not take up space
Other elements behave as if the absolute element does not exist
Positioned relative to the nearest positioned ancestor
If no ancestor is positioned, it positions relative to the `<html>` element

Common Absolute Positioning Patterns

CSS

/* Badge on an icon or avatar */
.avatar-container {
  position: relative;
  display: inline-block;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

/* Overlay on an image */
.image-container {
  position: relative;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

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

Fixed Positioning

An element with `position: fixed` is positioned relative to the browser viewport. It stays in the same place even when the page is scrolled.

CSS

/* Fixed navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2c3e50;
  color: white;
  padding: 15px 20px;
  z-index: 1000;
}

/* Add padding to body so content isn't hidden behind the navbar */
body {
  padding-top: 60px;
}

/* Fixed back-to-top button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}

/* Fixed sidebar */
.fixed-sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 250px;
  height: calc(100vh - 60px);
  background-color: #f5f5f5;
  overflow-y: auto;
  padding: 20px;
}

Sticky Positioning

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

CSS

/* Sticky header that sticks when scrolled past */
.section-header {
  position: sticky;
  top: 0;
  background-color: white;
  padding: 15px 20px;
  border-bottom: 2px solid #3498db;
  z-index: 100;
}

/* Sticky sidebar */
.sticky-sidebar {
  position: sticky;
  top: 80px;  /* Sticks 80px from top (below a fixed navbar) */
}

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

Important: Sticky positioning requires the parent to have enough height for scrolling. It will not work if the parent element has `overflow: hidden` or `overflow: auto`.

Z-Index

When positioned elements overlap, `z-index` controls which element appears on top. Higher values appear in front of lower values.

CSS

.behind {
  position: relative;
  z-index: 1;
}

.in-front {
  position: relative;
  z-index: 10;
}

/* Common z-index scale */
.dropdown { z-index: 100; }
.navbar { z-index: 1000; }
.modal-backdrop { z-index: 2000; }
.modal { z-index: 2001; }
.tooltip { z-index: 3000; }

Important: `z-index` only works on positioned elements (relative, absolute, fixed, or sticky). It has no effect on static elements.

Summary

CSS positioning gives you precise control over element placement. Use relative for small offsets and as a context for absolute children. Use absolute for elements that need to be placed precisely within a container. Use fixed for elements that should stay visible during scrolling. Use sticky for elements that should stick after scrolling to a certain point.

In the next article, you will learn about CSS Flexbox.