1
00:00:00,420 --> 00:00:04,890
The z index property allows us to specify the stock order of an element.

2
00:00:05,220 --> 00:00:10,850
To better illustrate this let's take a look at an example on this HMO page.

3
00:00:10,920 --> 00:00:22,570
We define this style for two divs diff blue and yellow the blue did has a width of 600 pixels a height

4
00:00:22,570 --> 00:00:26,450
of 50 pixels background color blue.

5
00:00:26,520 --> 00:00:35,670
It's position from the top is 0 pixels and a position property set to absolute the yellow div is almost

6
00:00:35,670 --> 00:00:44,910
identical except the with is 400 pixels height is 400 pixels in the background color is yellow since

7
00:00:44,910 --> 00:00:54,660
they both have the exact same top position these two divs are stacked on top of one another.

8
00:00:54,770 --> 00:00:58,000
So let's take a look at this in our web browser to see what it looks like.

9
00:00:58,130 --> 00:01:05,400
We can see that by default the yellow div is on top of the blue div but what if we wanted the yellow

10
00:01:05,400 --> 00:01:13,610
div underneath the blue to in this case we need to specify the z index property for each to let's give

11
00:01:13,610 --> 00:01:15,590
the yellow did a z index of 1

12
00:01:22,680 --> 00:01:25,420
and the blue did a z index of 2

13
00:01:29,290 --> 00:01:34,830
I've saved the page in and when to refresh and we can now see that the blue div is on top of the yellow

14
00:01:34,830 --> 00:01:38,190
div because it has a higher z index.