1 00:00:00,690 --> 00:00:03,940 Hello and welcome to this video. 2 00:00:04,170 --> 00:00:14,170 Z index z index is used to specify the ways element has that top when B overlap. 3 00:00:14,190 --> 00:00:23,230 So where you have overlap in elements you are not sure what way they should be that top we can use the 4 00:00:23,230 --> 00:00:26,880 z index to specify this pack order. 5 00:00:27,150 --> 00:00:35,790 So with a z index and philémon can have either a positive or negative stuck or an A on elemen with a 6 00:00:35,790 --> 00:00:45,120 great US stuck order is always placed in front of an element with a low unstack mod whereby to position 7 00:00:45,150 --> 00:00:53,820 elements overlap and there is no z index specified element put xishun lost in the kitchen. 8 00:00:53,880 --> 00:00:57,190 Code will be shown on top. 9 00:00:57,330 --> 00:01:07,270 Z index can be used with position absolute position relative or position fixed. 10 00:01:07,440 --> 00:01:15,950 Suppose is said Index property can also be used will be positioned properties the index properties specifies 11 00:01:16,020 --> 00:01:23,610 this stack order of one element so an element within great US thakin order is always in front of an 12 00:01:23,700 --> 00:01:26,660 element with a low are stuck in order. 13 00:01:26,670 --> 00:01:29,530 Let me show you an example. 14 00:01:29,640 --> 00:01:31,760 This my sample will pay. 15 00:01:32,070 --> 00:01:37,820 The moment the pay is laid out the way it is been written on the code on the left. 16 00:01:37,950 --> 00:01:45,270 So I have not applied any position in the elements I just position the way they have appeared in the 17 00:01:45,270 --> 00:01:46,160 code. 18 00:01:46,560 --> 00:01:54,270 What I'm going to do I am going to ply an absolute position because that index will also work in either 19 00:01:54,780 --> 00:01:57,160 fixed up salute or relative position. 20 00:01:57,160 --> 00:02:03,580 Some will apply an absolute position to the image so you watch that image. 21 00:02:04,590 --> 00:02:08,560 So given the position absolute From the left. 22 00:02:08,690 --> 00:02:14,620 Zero pixels from the top zero pixels where it will position there with zero pixels. 23 00:02:14,840 --> 00:02:18,940 So let me save that refresh. 24 00:02:19,280 --> 00:02:21,310 He can see his move took to the top. 25 00:02:21,390 --> 00:02:27,060 It's gone right to the top because I've not given any room the position until a top is zero so I've 26 00:02:27,090 --> 00:02:32,860 not told it to leave any gaps and to zero on the left. 27 00:02:32,860 --> 00:02:37,990 Also there's no position so hands in zero are pics of the fire specifies on value. 28 00:02:38,010 --> 00:02:41,610 There may be some margins in between but because I haven't. 29 00:02:41,610 --> 00:02:45,260 That's why he's occupied the top left. 30 00:02:45,300 --> 00:02:54,180 If he noticed because I have set it to position absolute It has gone on top of the text of the paragraph 31 00:02:54,180 --> 00:03:05,190 text for me form to set the index so make it at the moment we can't see the rest of the text because 32 00:03:05,250 --> 00:03:08,480 the image due to absolute positioning is gone. 33 00:03:08,490 --> 00:03:19,200 On top of the paragraph text so we can use the z index to make it in make the image appear behind the 34 00:03:19,200 --> 00:03:27,890 paragraph text so to do that I'm going to give the image in negative z index. 35 00:03:29,340 --> 00:03:31,730 So I just saved that. 36 00:03:32,310 --> 00:03:36,540 You see that it has changed because I'm giving the imake in negatived Z. 37 00:03:36,540 --> 00:03:40,140 In fact he that's gone behind the text. 38 00:03:40,140 --> 00:03:43,020 Now we can see the rest of the text. 39 00:03:43,200 --> 00:03:52,770 So z index is quite useful in changing the way a Le Mans up positioned when they overlap so he can be 40 00:03:52,800 --> 00:03:55,770 effective only with all the lapping elements. 41 00:03:55,980 --> 00:04:02,070 So the image previously covered this text due to absolute positioning we couldn't see the rest of the 42 00:04:02,070 --> 00:04:10,430 text so I had to use the negative z index to give the paragraph higher power rating so makes forces 43 00:04:10,440 --> 00:04:19,230 the image to go behind the paragraph as we can see the rest of the text so we z index ukin or always 44 00:04:19,230 --> 00:04:27,690 have a positive or negative value within two elements on the page. 45 00:04:27,710 --> 00:04:29,410 I'll have a lap in. 46 00:04:29,520 --> 00:04:35,460 There is no z index set the elemen that appears last on the list here. 47 00:04:35,460 --> 00:04:36,810 Middle document. 48 00:04:37,570 --> 00:04:45,050 The element that appears on the code update multiple command called will have a higher stack order and 49 00:04:45,150 --> 00:04:50,510 appear first on the page in terms of Display order. 50 00:04:51,180 --> 00:04:59,870 In this video I explain what is z index is z index is used to determine the position. 51 00:05:00,510 --> 00:05:02,340 Overlap in limits. 52 00:05:02,370 --> 00:05:12,070 So when elements overlap there is no Z in there except the elemen that appears last on the hastier mole 53 00:05:12,120 --> 00:05:16,210 could all have a higher. 54 00:05:16,320 --> 00:05:19,130 Order will be displayed first. 55 00:05:19,440 --> 00:05:27,370 However you can use a z index to reach position that display order. 56 00:05:27,510 --> 00:05:34,260 In the example we use I use an image and give it a negative said invect. 57 00:05:34,500 --> 00:05:41,040 So us to position it behind the text so that we can see the rest of the ticks. 58 00:05:41,110 --> 00:05:44,310 I hope the you as being useful. 59 00:05:44,310 --> 00:05:47,550 Remember that you can only use Z in lakes. 60 00:05:47,590 --> 00:05:50,020 We've had three types of positions. 61 00:05:50,190 --> 00:06:00,750 Absolute relative or fixed and you can set an element to have a negative or positive set index. 62 00:06:00,780 --> 00:06:02,220 Thank you so much for watching. 63 00:06:02,250 --> 00:06:04,430 I hope the video has made sense. 64 00:06:04,560 --> 00:06:05,550 Bye for now.