Describe z-index, and it's stacking context

z-index is a CSS property that controls the stacking order of elements on a web page along the z-axis (the axis that comes "out" of the screen toward the viewer). It determines which elements appear in front of or behind other elements when they overlap.

How it works

An element with a greater z-index is always in front of an element with a lower z-index.

The z-index only works in combination with the positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items.

Without a specified z-index, HTML elements are stacked based on their appearance order. Later elements appear on top of earlier ones if they overlap.

Stacking context

A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is viewing the web page.

A stacking context forms when an element has a non-static position and a non-auto z-index. This limits z-index effects to a specific part of the layout.

Examples

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

<style>
  .container {
    position: relative; /* Establishes a stacking context */
  }

  .box {
    width: 100px;
    height: 100px;
    color: white;
    position: absolute; /* Needed for z-index to take effect */
    left: 50px; /* Overlap the boxes */
    top: 50px;
  }

  .box1 {
    background-color: red;
    z-index: 1; /* Higher z-index, appears on top */
  }

  .box2 {
    background-color: blue;
    z-index: 0; /* Lower z-index, appears behind box 1 */
    left: 100px; /* Slight horizontal shift */
    top: 100px;
  }
</style>

Summary

• z-index is a CSS property that controls the stacking order of elements on a web page along the z-axis.
• It only works in combination with the positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items.
• Without a specified z-index, HTML elements are stacked based on their appearance order. Later elements appear on top of earlier ones if they overlap.
• A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is viewing the web page.
• A stacking context forms when an element has a non-static position and a non-auto z-index. This limits z-index effects to a specific part of the layout.