CSS z-index Property

In this chapter you will learn:
About z-index property
Values of this property
Example of this property

CSS z-index property is used to specify the z-index of an element. This property can only work if the element is positioned absolute, relative or fixed. If the element is positioned normal then it can’t work with that element.

Values of this property
Values Description
auto This is the default value which sets the stack order.
number Specify the number to set the stack order
initial Sets the default value
inherit Inherit from parent

Example of this property 

<html>
<head>
   <title>Example of z-index property</title>
    <style type="text/css">
        #a
        {
        left:0px;
        top:0px;
        position:absolute;
        z-index:-1;
        }                 
                       
           
    </style>
    </head>
<body>
<p>Result of z-index</p>
<img src="css-icon.jpg"id="a"alt="css icon" />
<p>This is the example of z-index.</p>
</body>
</html>

Output:-
example of z-index property
SUMMARY

In this chapter, you have learned about CSS z-index property with an example so now try to use this property for yourself.

 
 

Share your thought