z-index is used to control the order of elements when they are stacked on top of each other. The property accepts integer values, the higher the integer, the higher the order. For example,
html
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>css
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}By default, the box .item4 should be on top of .item3, but we configured their z-index values, and because .item3 has a higher order, it will be on top of all other elements.
You can also change the z-index of the blue box (.item) to see what happens.