What is z-index and how does it work?

The `z-index` CSS property controls the vertical stacking order of positioned elements that overlap. It's a fundamental concept for managing layout depth and visual hierarchy on a webpage.

What is z-index?

z-index is a property used in CSS to specify the stack order of an element. When elements overlap, z-index determines which one covers the others. A higher z-index value generally means the element is closer to the user, appearing on top of elements with lower z-index values.

How z-index works

For z-index to have an effect, the element must be a 'positioned' element, meaning its position property must be set to something other than static (e.g., relative, absolute, fixed, or sticky). By default, all HTML elements have a position: static; and thus z-index has no impact on them.

The core concept behind z-index is the 'stacking context'. A stacking context is a three-dimensional rendering space formed by HTML elements. Elements within the same stacking context are ordered according to their z-index values. An element with a higher z-index will appear on top of an element with a lower z-index within the same stacking context.

• Requires Positioning: An element must have a position value other than static (e.g., relative, absolute, fixed, sticky) for z-index to apply.
• Stacking Contexts: Elements belong to a stacking context. z-index only compares elements within the same stacking context. A new stacking context is created by any element with a position value other than static and a z-index value other than auto, or by certain other CSS properties like opacity less than 1, transform, filter, perspective, etc.
• Higher Values Win: Within a stacking context, elements with higher z-index values are stacked on top of elements with lower z-index values.
• Auto and 0: The default z-index value is auto, which behaves like z-index: 0 for elements without an explicit stacking context, but for an element that creates a stacking context, auto means its children respect its parent's stacking order.
• Negative Values: z-index can accept negative values, which can place elements behind their parent or even behind the background of a page, depending on the stacking context.
• Inheritance: Children of an element inherit its stacking context. Their z-index values are relative to their parent's stacking context, not the root context, unless they establish their own.

Example

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2;
}

.box3 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: green;
  z-index: 0;
}

In this example, box2 (blue) will appear on top because it has the highest z-index of 2. box1 (red) with z-index: 1 will be below box2 but above box3 (green) which has z-index: 0. All these elements are positioned and exist within the same default stacking context.