CSS Z-index

CSS z-index concept is based on the stack order of a box and its position value might be one of the absolute, fixed, or relative. Basically, it comes into action when elements also occupy the z-axis. An element having a higher z-index value always lies on another box having a lower z-index value. Z-index value might be an integer value.

Statement   .box{position: relative;left: 80px;top: -150px;z-index: -2;}     

Note:The z-index value is used to decide element position inside the stack. The element having a higher z-index value will be top of the stack while the element having a lower z-index value will be bottom of the stack.

Example

General Syntax

     .box {
   z-index: -2;
}

Source Code

      
         .box {
   position: relative;
   left: 80px;
   top: -150px;
   z-index: -2;
}

Code Explanation

Note:In this example, the CSS z-index concept is described. The HTML element having a higher z-index value will be at the top of the stack.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS