Static Positioning

The default rendering mode for all block-level and inline elements. Nodes participate fully in the standard document flow, occupying their allocated space according to normal page layout rules. Offset properties (top, left, etc.) have no effect.

Absolute Positioning & Containment Strategy

Extracts an element from the standard flow. It no longer reserves space for itself, allowing subsequent elements to shift up and fill the void. Coordinate values align relative to the closest ancestor that possesses a positioning value other than static.

<style>
  .reference-frame {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: #fdd835;
    position: relative;
  }
  .floating-element {
    width: 200px;
    height: 200px;
    background-color: #d32f2f;
    position: absolute;
    top: 100px;
    left: 100px;
  }
</style>
<div class="reference-frame">
  <div class="floating-element"></div>
</div>

Relative Positioning & Visual Offsetting

Preserves the eleemnt's original footprint within the layout grid. Unlike absolute positioning, adjacent nodes continue to treat it as present. Applying displacement values shifts the rendered box visually without affecting surrounding flow.

<style>
  .layout-slot {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .shifted-box {
    width: 150px;
    height: 150px;
    background-color: #1976d2;
    position: relative;
    top: 40px;
    left: 40px;
  }
</style>
<div class="layout-slot">
  <div style="width:150px;height:150px;background:#8d6e63;"></div>
  <div class="shifted-box"></div>
  <div style="width:150px;height:150px;background:#8d6e63;"></div>
</div>

Fixed Positioning & Viewport Anchoring

Removes the target node from the document tree entirely. Coordinates are calculated against the visible browser window rather than any parent container. Scrolling the page does not move the element, making it ideal for persistent interface components.

<style>
  .scrollable-region {
    height: 150vh;
    background-color: #388e3c;
  }
  .viewport-anchor {
    width: 80px;
    height: 80px;
    background-color: #ffb300;
    position: fixed;
    right: 20px;
    bottom: 30px;
  }
</style>
<div class="scrollable-region"></div>
<div class="viewport-anchor"></div>

Sticky Positioning & Scroll Intersection

Functions as a hybrid state manager. Initially behaves like relative, maintaining flow until the user scrolls past a defined threshold. Once that boundary is crossed, it locks into place akin to fixed until its containing block ends. Directional thresholds must be explicitly declared.

<style>
  .sticky-container {
    height: 200vh;
    display: flex;
    flex-direction: column;
  }
  .header-block {
    height: 80px;
    background-color: #ffc107;
  }
  .tethered-bar {
    height: 60px;
    background-color: #e53935;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .content-stream {
    flex-grow: 1;
    background-color: #4caf50;
  }
</style>
<div class="sticky-container">
  <div class="header-block"></div>
  <div class="tethered-bar"></div>
  <div class="content-stream"></div>
</div>

Managing Z-Index and Stacking Order

Controls visual layering when elements intersect. Comparison logic applies differently based on relationship hierarchy.

Sibling Overlap Nodes sharing the same parent stack sequentially. Higher integer values render above lower ones. Default priority sits at zero.

<style>
  .overlap-area {
    position: relative;
    height: 300px;
  }
  .base-layer {
    width: 200px;
    height: 200px;
    background-color: #5d4037;
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 1;
  }
  .top-layer {
    width: 180px;
    height: 180px;
    background-color: #ffd54f;
    position: relative;
    z-index: 2;
  }
</style>
<div class="overlap-area">
  <div class="base-layer"></div>
  <div class="top-layer"></div>
</div>

Parent-Child Depth Control Descendants inherit a local stacking context bound to the parent. Negative z-index values force children behind the parent's background painting region while keeping them inside the DOM structure.

<style>
  .parent-node {
    width: 220px;
    height: 220px;
    background-color: #fdd835;
    position: relative;
    padding: 20px;
  }
  .inset-element {
    width: 100px;
    height: 100px;
    background-color: #e91e63;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: -1;
  }
</style>
<div class="parent-node">
  <div class="inset-element"></div>
</div>