CSS - z-index


Advertisements


Description

The z-index sets the stacking level of an element.

Possible Values

  • auto − The stack level of the element is the same as that of its parent element.

  • integer − The stack level of the element is set to the given value, and it establishes a new stacking context for any descendant elements.

Applies to

All the positioned elements.

DOM Syntax

object.style.zindex = "1";

Example

Following is the example which shows how to create layers in CSS.

<html>
   <head>
   </head>
   
   <body>
      <div style="background-color:red;
         width:300px;
         height:100px;
         position:relative;
         top:10px;
         left:80px;
         z-index:2">
      </div>
      
      <div style="background-color:yellow;
         width:300px;
         height:100px;
         position:relative;
         top:-60px;
         left:35px;
         z-index:1;">
      </div>
      
      <div style="background-color:green;
         width:300px;
         height:100px;
         position:relative;
         top:-220px;
         left:120px;
         z-index:3;">
      </div>
   </body>
   
</html> 

This will produce following result −


css_references.htm

Advertisements