HOLLA TECH - LEARN

The z-index Property
 

When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

The CSS:

.blue {
   background-color: #8EC4D0;
   margin-bottom: 15px;
   width: 120px;
   height: 120px;
   color: #FFF;
}
.red {
   background-color: #FF4D4D;
   position: relative;
   width: 120px;
   height: 120px;
   color: #FFF;
   margin-top: 50px;
   margin-left: 50px;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
The red box overlaps the blue box, because it was placed later in the HTML markup. The z-index property can change this order.

Assigning the z-index Property
 

Assigning a higher z-index value to the blue div and a lower z-index value to the red div will result in the following:

The CSS:

.blue {
   z-index: 3;
   position: relative;
}
.red {
  z-index: 2;
   position: relative;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
The z-index works only on positioned elements (position:absolute, position:relative, or position:fixed).

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT