Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - z-index


previous next AddThis Social Bookmark Button


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.

<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



previous next Printer Friendly

Advertisements


  

Advertisements