CSS z-index

The z-index property in CSS determines the stacking order of elements on the web page. When two or more elements overlap, the element with a higher z-index value will be displayed on top of the other elements.

The z-index property can only be applied to elements with a specified position property, such as position: relative, position: absolute, or position: fixed.

The z-index property accepts numerical values as its parameter. Elements with a higher z-index value will be displayed on top of elements with a lower z-index value.

Let's look at an example to better understand how z-index works:

In the above example, we have two overlapping <div> elements with different z-index values. The blue <div> has a higher z-index value of 2, so it is displayed on top of the yellow <div> which has a z-index value of 1.

You can also use negative values for the z-index property to place an element behind other elements on the page.

It is important to note that the stacking order of elements also depends on their DOM order. Elements that appear later in the HTML document will be displayed on top of elements that appear earlier, unless the z-index property is used to specify a different order.