Adjusting the Z-Axis Stacking of Elements in CSS

The stacking order of elements can be controlled using the z-index property, which takes a positive or negative integer value, or zero. The property only works for elements whose position value is set to absolute, fixed, or relative.

When using this property, the stacking rule for elements is as follows: the element with the higher z-index value will be above.

Let's change the stacking order of the elements from the previous example. To do this, we'll set the first element to z-index greater than the second, like this:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

Result of code execution: