HTML 5

Z-Index Property In CSS

Z-index is used for serves to stabilize the order of elements which are in overlap.

Z-Index is an important property of CSS. The z-index property specifies the stack order of an element and its descendants. The z-index property in CSS controls the vertical stacking order of elements that overlap. When elements overlap, z-order determines which one covers the other.

push pop

An element with greater stack order is always in front of an element with a lower stack order. An element with a larger z-index generally covers an element with a lower one. The “Stack Order” refers to the element’s position on the Z axis (as opposed to the X axis or Y axis). A higher z-index value means the element will be closer to the top of the stacking order.

Z-index Syntax

    z-index: auto| number | initial | inherit;

Z-index: auto

  • This is the default setting and it attributes the same value to both the element and the parent, if no value is defined for the parent then the value is zero (0);

Z-index: integer number

  • Z-index: 1
  • Z-index: 2
  • Z-index: 2

Z-index: negative number

  • Z-index: -1

Z-index: inherit

  • Takes the same specified value as the property for the element's parent.

Example

The following is the HTML code I used for this tutorial.

HTML: Structure

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Z-Index tutorial</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <div id="one">One</div>  
  10.     <div id="two">Two</div>  
  11.     <div id="Three">Three</div>  
  12.     <div id="Four">Four</div>  
  13.     <div id="Five">Five</div>  
  14. </body>  
  15.   
  16. </html>  
Use CSS code to make the look and feel for all the HTML elements as we used before in the HTML part. The following is the CSS code I have used in this tutorial.

CSS: Rule
  1. #  
  2. one {  
  3.     border: solid 5 px silver;  
  4.     background - color: Aqua;  
  5.     position: absolute;  
  6.     z - index: 1;  
  7.     opacity: 0.5;  
  8.     height: 100 px;  
  9.     width: 100 px;  
  10. }#  
  11. two {  
  12.     border: solid 5 px silver;  
  13.     background - color: Green Yellow;  
  14.     position: absolute;  
  15.     top: 30 px;  
  16.     left: 35 px;  
  17.     z - index: 2;  
  18.     opacity: 0.5;  
  19.     height: 100 px;  
  20.     width: 100 px;  
  21. }  
  22.   
  23. #  
  24. Three {  
  25.     border: solid 5 px silver;  
  26.     background - color: Coral;  
  27.     position: absolute;  
  28.     top: 60 px;  
  29.     left: 60 px;  
  30.     opacity: 0.5;  
  31.     z - index: 3;  
  32.     height: 100 px;  
  33.     width: 100 px;  
  34. }  
  35.   
  36. #  
  37. Four {  
  38.     border: solid 5 px silver;  
  39.     background - color: Yellow;  
  40.     position: absolute;  
  41.     top: 90 px;  
  42.     left: 90 px;  
  43.     opacity: 0.5;  
  44.     z - index: 4;  
  45.     height: 100 px;  
  46.     width: 100 px;  
  47. }  
  48.   
  49. #  
  50. Five {  
  51.     border: solid 5 px silver;  
  52.     background - color: MediumSpringGreen;  
  53.     position: absolute;  
  54.     top: 120 px;  
  55.     left: 120 px;  
  56.     opacity: 0.5;  
  57.     z - index: 5;  
  58.     height: 100 px;  
  59.     width: 100 px;  
  60. }  
Complete code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Z-Index tutorial</title>  
  6.     <style>  
  7.         #one {  
  8.             border: solid 5px silver;  
  9.             background-color: Aqua;  
  10.             position: absolute;  
  11.             z-index: 1;  
  12.             opacity: 0.5;  
  13.             height: 100px;  
  14.             width: 100px;  
  15.         }  
  16.           
  17.         #two {  
  18.             border: solid 5px silver;  
  19.             background-color: Green Yellow;  
  20.             position: absolute;  
  21.             top: 30px;  
  22.             left: 35px;  
  23.             z-index: 2;  
  24.             opacity: 0.5;  
  25.             height: 100px;  
  26.             width: 100px;  
  27.         }  
  28.           
  29.         #Three {  
  30.             border: solid 5px silver;  
  31.             background-color: Coral;  
  32.             position: absolute;  
  33.             top: 60px;  
  34.             left: 60px;  
  35.             opacity: 0.5;  
  36.             z-index: 3;  
  37.             height: 100px;  
  38.             width: 100px;  
  39.         }  
  40.           
  41.         #Four {  
  42.             border: solid 5px silver;  
  43.             background-color: Yellow;  
  44.             position: absolute;  
  45.             top: 90px;  
  46.             left: 90px;  
  47.             opacity: 0.5;  
  48.             z-index: 4;  
  49.             height: 100px;  
  50.             width: 100px;  
  51.         }  
  52.           
  53.         #Five {  
  54.             border: solid 5px silver;  
  55.             background-color: MediumSpringGreen;  
  56.             position: absolute;  
  57.             top: 120px;  
  58.             left: 120px;  
  59.             opacity: 0.5;  
  60.             z-index: 5;  
  61.             height: 100px;  
  62.             width: 100px;  
  63.         }  
  64.     </style>  
  65. </head>  
  66.   
  67. <body>  
  68.     <div id="one">One</div>  
  69.     <div id="two">Two</div>  
  70.     <div id="Three">Three</div>  
  71.     <div id="Four">Four</div>  
  72.     <div id="Five">Five</div>  
  73. </body>  
  74.   
  75. </html>  
Output

result

Conclusion

I hope you liked this useful article. It will be useful for HTML and CSS beginners. Please provide your valuable feedback and suggestions.

Live demo link: Jsfiddle

References

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs