css z-index property

the z-index property specifies the stack order of an element.

the higher the value, the higher the element will appear.

an element can have a positive or negative stack order.

think of z-index stacking as layering.check out the image below for an example:

css zindex property

the css z-index property syntax :-

		z-index:  auto | number | inherit ;
z-index
initial valueauto
applies toall elements
inheritedno
mediavisual
version:css2

browser support - css z-index property

the z-index property is supported in all major browsers.

note:-internet explorer 9 supports the 'inherit' value.


css z-index property example

        <style  type= "text/css">
        
 .img_first {   border:1px solid lime;
           
           height:100px;
           
           background-color:pink;
           
           position:absolute;
           
           left:200px;
           
           top:150px;
           
           z-index:3;}
           
 .img_second {   border:1px solid pink;
           
           width:100px;    height:100px;
           
           background-color:pink;
           
           position:absolute;
           
           left:200px;
           
           top:120px;
           
           z-index:1;}
           
           </style>

css z-index property values

valuedescription
autodefault. it specifies the stacking order of the positioned objects based on

the order in which the objects appear in the html source.
numberinteger that specifies the position of the object in the stacking order.
inheritinherit from the parent element.