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.

More Articles

 
 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.