Skip to main content

CSS z-Index: Controlling Element Stacking Order for Powerful Web Layouts

The z-index property is a CSS property that allows you to control the vertical stacking order of elements on a web page.

The z-index property takes a numeric value, and elements with a higher z-index value will be displayed on top of elements with a lower z-index value.

The default value of z-index is auto, which means that elements are displayed in the order in which they appear in the HTML markup.

As an example:

Editor

Loading...

In this example:

  • There are two div elements with the class box. The first div has a z-index value of 1, and the second div has a z-index value of 2.
  • This means that the second div will be displayed on top of the first div.
  • The background-color of the second div is also set to white, which makes it appear as if it is on top of the first div.