Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
css
z index

What is the z-index property in CSS?

Akande Olalekan Toheeb

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

In CSS, the z-index property specifies how elements stack on each other.

When elements overlap, the element with a larger z-index covers those with a smaller one.

Note: The z-index is usually useful with the position property (other than position).

Syntax

The z-index property is specified like the other CSS properties. We specify the property and its value.

property: value

Keyword value

 z-index:auto;

We use the keyword value to set the context to 0. The box doesn’t establish a new local stacking context.

Using an integer

 z-index: 0;
 z-index: 5;
 z-index: 139;
 z-index: -3;

The element with a larger value covers those with smaller values.

Global values

z-index: inherit;
z-index: initial;
z-index: revert;
z-index: unset;

The global values function is the same for every CSS property.

Demonstrating CSS z-index property

Explanation

In the HTML section:

  • Lines 5-7: We create two boxes with classes, red-box and black-box .

In the CSS section:

  • Lines 4-12: These contain the CSS properties of the red-box.

  • Lines 5-7: red-box gets its position properties.

  • Lines 8-10: We set the color, width, and height of red-box.

  • Line 11: A z-index property is set for red-box. This defines whether the box will be placed above or below any other element that is in the same position.

  • Lines 13–21: Contains the CSS properties of black box.

  • Lines 14–16: The black-box gets its position properties.

  • Lines 17–19: We set the color, width, and height of black-box.

  • Line 20: A z-index property is set for the black box. This places the black-box on the red-box because the value of the z-index is higher.

RELATED TAGS

communitycreator
css
z index

CONTRIBUTOR

Akande Olalekan Toheeb

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring