Copyright © tutorialspoint.com

# CSS - z-index

## 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.

    <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>

This will produce following result:

To Become more comfortable - Do Online Practice

Copyright © tutorialspoint.com