Course Content

  • Lecture-42_CSS_z-index

Course Content


The Z index property is used to specify the stacking order of elements on a page. It is an integer number that determines the z-order in which an element appears in relation to other elements. The higher the Z index, the closer it will be to the viewer and vice versa.

When rendering content, the z-index attribute allows you to change the order of object layering. Each box in CSS has a three-dimensional location. Boxes are placed one on top of the other and lie along a "z-axis" in addition to their horizontal and vertical locations.

To summarise, the majority of z-index difficulties may be resolved by following these two guidelines:

  • Verify that the elements' positions and z-index numbers are in the proper order.
  • Check for parent components that are limiting the z-index level of their children.

2147483647 is the maximum range. 999, 9999, and 99999 are common z-index numbers in CSS code bases. This is a possibly clumsy approach of making sure the element is always on top. When numerous parts need to be on top, it can cause issues down the road.

The "default layer" (where all components without an explicit z-index sit) is always z-index:0, and z-index:auto indicates "Sets the stack order equal to its parent."

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download LearnVern App

App Preview Image
App QR Code Image
Code Scan or Download the app
Google Play Store
Apple App Store
598K+ Downloads
App Download Section Circle 1
4.57 Avg. Ratings
App Download Section Circle 2
15K+ Reviews
App Download Section Circle 3
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere