What is the Z Index in CSS

1<div class="item1">z-index: 1</div>
2<div class="item2">z-index: 2</div>
3<div class="item3">z-index: 3</div>
4<div class="item4">z-index: 2</div>
5<div class="item5">z-index: 1</div>
6
7<div class="item">Try to change the z-index of this box</div>

1div {
2  font-family: Georgia, "Times New Roman", Times, serif;
3  font-size: x-large;
4  text-align: center;
5  padding: 20px;
6  border: 1px solid orange;
7  background-color: bisque;
8
9  position: absolute;
10}
11
12.item {
13  top: 0px;
14  left: 0px;
15  height: 300px;
16
17  border: 1px solid skyblue;
18  background-color: lightblue;
19}
20
21.item1 {
22  top: 0px;
23  left: 0px;
24
25  z-index: 1;
26}
27
28.item2 {
29  top: 50px;
30  left: 50px;
31
32  z-index: 2;
33}
34
35.item3 {
36  top: 100px;
37  left: 100px;
38
39  z-index: 3;
40}
41
42.item4 {
43  top: 150px;
44  left: 50px;
45
46  z-index: 2;
47}
48
49.item5 {
50  top: 200px;
51  left: 0px;
52
53  z-index: 1;
54}