Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Determining the Stack Order with z-index

In CSS, the z-index property represents the stacking level of HTML elements, and it is used to control the stacking order among these elements.

It's similar to deciding which card goes on top and which goes below when creating a stack of cards.

Elements with a higher z-index value will appear above elements with a lower z-index.

The z-index takes an integer value and applies only to elements with position properties set to relative, absolute, or fixed, and not to those with a static position.

Using z-index Property
#one {
  position: absolute;
  z-index: 1;
}

#two {
  position: absolute;
  z-index: 2;
}

In the CSS code above, the element with the id two will appear above the element with the id one.


What if you use a negative z-index?​

Assigning a negative value to z-index places the element behind other elements.

Example:

CSS
#one {
  position: relative;
  z-index: -1;
}

With z-index set to -1, the #one element is displayed behind other elements.


Follow the highlighted code sections to input.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.