HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Positioning & Z-Index

The position property removes elements from normal document flow or alters their default behavior.

Static: Default. Elements render in order.
Relative: Positioned relative to its normal static position. Leaves a "ghost" space where it used to be.
Absolute: Removed from normal flow. Positioned relative to its closest positioned ancestor (usually a parent with relative).
Fixed: Removed from flow. Positioned relative to the browser window (viewport). Stays fixed when scrolling.
Sticky: Toggles between relative and fixed depending on scroll position.

Z-Index

Controls the vertical stacking order of elements that overlap. Higher z-index goes on top. Only works on positioned elements!

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; margin: 0; padding: 20px; height: 150vh; background: #fdfdfd; }
    .box { width: 100px; height: 100px; color: white; padding: 10px; font-weight: bold; }
    
    /* Relative parent to contain the absolute child */
    .parent {
      position: relative;
      width: 400px;
      height: 300px;
      background: #eee;
      border: 2px dashed #999;
      margin-top: 50px;
    }
    
    .absolute-box {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #e74c3c;
      z-index: 10;
    }
    
    .relative-box {
      position: relative;
      top: 40px;
      left: 40px;
      background: #3498db;
      z-index: 20; /* Higher z-index puts blue on top of red */
    }
    
    .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #2c3e50;
      color: white;
      padding: 15px;
      text-align: center;
      z-index: 100; /* Stays on top of EVERYTHING */
    }
  </style>
</head>
<body>

<div class="fixed-nav">
    I am fixed to the top! Scroll down, I won't move!
  </div>
  
  <h2>Positioning Playground</h2>
  
  <div class="parent">
    Parent Container (Relative)
    
    <div class="box absolute-box">
      Absolute (Top:20, Right:20, Z:10)
    </div>
    
    <div class="box relative-box">
      Relative (Top:40, Left:40, Z:20)
    </div>
  </div>
  
  <p style="margin-top:50px;">Scroll down to test the fixed header.</p>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Positioning & Z-Index

Positioning & Z-Index

Z-Index

Try It Yourself

Topics