Introduction

Z-index is used for serves to stabilize the order of elements that are in the 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 a 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
Z- index: integer number
Z- index: negative number
Z- index: inherit
Example
 The following is the HTML code I used for this tutorial.
HTML: Structure
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Z-Index tutorial</title>
  5. </head>
  6. <body>
  7. <div id="one">One</div>
  8. <div id="two">Two</div>
  9. <div id="Three">Three</div>
  10. <div id="Four">Four</div>
  11. <div id="Five">Five</div>
  12. </body>
  13. </html>
Use CSS code to make them 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. }
  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. }
  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. }
  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>
  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. }
  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. }
  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. }
  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. }
  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>
  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. </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