1 00:00:00,650 --> 00:00:01,220 ‫Hey, there. 2 00:00:01,460 --> 00:00:07,100 ‫Welcome back, Siobhan, the site now in this lecture, let us discuss about positions. 3 00:00:07,760 --> 00:00:14,450 ‫So whenever we work with any type of elements, maybe our development, maybe a need, they both b h 4 00:00:14,600 --> 00:00:16,160 ‫or any type of element. 5 00:00:16,670 --> 00:00:18,680 ‫We usually need some position. 6 00:00:19,610 --> 00:00:24,950 ‫By default, we follow the natural flow that if I add a forced element, it will be here. 7 00:00:25,370 --> 00:00:31,220 ‫And then the second one, then the third one, and in the previous sessions were discussed about display. 8 00:00:31,490 --> 00:00:34,520 ‫That means by default, they are taking block space. 9 00:00:34,670 --> 00:00:37,340 ‫And then the second element and then the third element. 10 00:00:37,790 --> 00:00:42,290 ‫So I hope we got the idea about display properly now in positions. 11 00:00:42,500 --> 00:00:47,260 ‫We want to define how to add certain element at the top right corner. 12 00:00:47,270 --> 00:00:50,180 ‫Or maybe I want to fix something at the footer side. 13 00:00:50,570 --> 00:00:52,910 ‫Or maybe I want something at the center. 14 00:00:53,390 --> 00:00:58,880 ‫So how we can do that, that's where this whole position topic come into picture. 15 00:00:59,940 --> 00:01:04,260 ‫Now, before discussing about this topic in depth, I want to talk about fuel domes. 16 00:01:04,680 --> 00:01:08,010 ‫The first one is viewport borders, viewport. 17 00:01:08,520 --> 00:01:13,080 ‫So whatever the visual screen that currently we have is viewport. 18 00:01:13,380 --> 00:01:15,240 ‫That means this wide screen. 19 00:01:16,640 --> 00:01:23,510 ‫If I say what is your word that is VW, it will be this week from this point to this point. 20 00:01:23,960 --> 00:01:25,520 ‫What will be the viewport height? 21 00:01:25,700 --> 00:01:26,870 ‫It will be this height. 22 00:01:27,560 --> 00:01:30,530 ‫So this is our view on four different devices. 23 00:01:30,650 --> 00:01:31,780 ‫There will be different view. 24 00:01:31,790 --> 00:01:37,420 ‫Or if I open my website on a smartphone, the width and height will be different on tablet. 25 00:01:37,430 --> 00:01:42,920 ‫It will be different even if I try to use, inspect and try to change the size. 26 00:01:43,310 --> 00:01:47,210 ‫Here you can see on the top right corner, I can see my vertis changing. 27 00:01:47,420 --> 00:01:50,270 ‫So that means my view or width is changing. 28 00:01:51,050 --> 00:01:54,320 ‫And this is an important point which we will use in future. 29 00:01:54,950 --> 00:01:57,110 ‫Now let's talk about the two important thing. 30 00:01:57,350 --> 00:02:03,830 ‫The first one is whenever we are working with and you do this device dependent on the patent position. 31 00:02:04,280 --> 00:02:10,310 ‫Now, if I said this device will be dependent on its parent position, this will depend on its parent 32 00:02:10,310 --> 00:02:10,970 ‫position. 33 00:02:11,000 --> 00:02:13,640 ‫This will depend on its parent position. 34 00:02:14,030 --> 00:02:17,510 ‫So by default, this dip depends on the parent position. 35 00:02:18,230 --> 00:02:20,700 ‫So I have to find this to get back ahead. 36 00:02:21,140 --> 00:02:22,700 ‫But nothing is visual. 37 00:02:22,880 --> 00:02:27,500 ‫So if I get back here, I see this is debating them. 38 00:02:27,500 --> 00:02:30,680 ‫And then these are child childish, but they are not visible. 39 00:02:30,770 --> 00:02:31,160 ‫Why? 40 00:02:31,220 --> 00:02:32,930 ‫Because we don't have any content. 41 00:02:33,740 --> 00:02:39,920 ‫And had I have added a background colour to each one of them, even the child, even with bedding. 42 00:02:40,160 --> 00:02:41,450 ‫But they are not visible. 43 00:02:42,050 --> 00:02:49,460 ‫Remember, there were 200 person by default because they are block element, but their high does zero, 44 00:02:49,850 --> 00:02:52,250 ‫so that means we cannot do anything with them. 45 00:02:52,760 --> 00:02:58,250 ‫For example, let me add a height, let me add height as 100 percent. 46 00:02:59,240 --> 00:03:00,380 ‫So if I get my kid. 47 00:03:01,850 --> 00:03:03,560 ‫I still don't see any do. 48 00:03:04,660 --> 00:03:05,200 ‫Why? 49 00:03:05,290 --> 00:03:14,410 ‫Because this high depends on percentage, which depends on beating and the height for what is zero at 50 00:03:14,410 --> 00:03:17,000 ‫this point of time because we don't have any content. 51 00:03:17,540 --> 00:03:21,940 ‫I if I for just example, if I add Hi Ted. 52 00:03:23,680 --> 00:03:29,480 ‫And maybe if I add height as hundred pixels, save this one, you will see. 53 00:03:29,500 --> 00:03:32,130 ‫Now this is 100 percent or this big. 54 00:03:33,940 --> 00:03:35,140 ‫And if we remove this. 55 00:03:37,090 --> 00:03:40,060 ‫So I can use high desert him, for these example. 56 00:03:43,970 --> 00:03:48,980 ‫Now I get back here, you can see now we have 500, which is pretty big, actually. 57 00:03:51,860 --> 00:03:56,110 ‫Now, if I get back here, you can see now my height is 200m. 58 00:03:56,600 --> 00:04:00,350 ‫Let me set height in purpose. 59 00:04:00,740 --> 00:04:03,830 ‫So let me say five for them, for all of them. 60 00:04:09,920 --> 00:04:14,350 ‫Also, let me try to have the dual screen, you know. 61 00:04:17,020 --> 00:04:23,350 ‫OK, so all three giants currently have some height I get back here now the problem with them is they 62 00:04:23,350 --> 00:04:25,080 ‫have built as 100 percent. 63 00:04:25,210 --> 00:04:27,460 ‫So let me also add a weight to them. 64 00:04:34,770 --> 00:04:35,640 ‫This looks fine. 65 00:04:35,680 --> 00:04:40,050 ‫So this is off screen, and on top of this, we have three elements. 66 00:04:40,350 --> 00:04:42,630 ‫Remember, this is our bill in the back. 67 00:04:42,900 --> 00:04:46,170 ‫On the top of this, we have these three elements. 68 00:04:46,620 --> 00:04:50,040 ‫Remember, all these dates are inside my opinion. 69 00:04:51,090 --> 00:04:52,770 ‫OK, this is some basic thing. 70 00:04:53,310 --> 00:04:56,400 ‫But what if I want to add this here? 71 00:04:56,580 --> 00:04:59,460 ‫Maybe what if I want to add this at the bottom? 72 00:05:00,500 --> 00:05:03,120 ‫So now we are dependent on two things. 73 00:05:03,140 --> 00:05:10,070 ‫Either I can add this according to Parikh, which is the default one, or I can add this Deb according 74 00:05:10,070 --> 00:05:11,120 ‫to this viewport. 75 00:05:11,450 --> 00:05:18,410 ‫For example, if I jump on to see streaks here, you can see I have so many elements now they are not 76 00:05:18,410 --> 00:05:19,680 ‫dependent on this page. 77 00:05:19,700 --> 00:05:25,040 ‫They are going to be at the top right corner as well as at the bottom right corner. 78 00:05:25,670 --> 00:05:27,240 ‫So that's how they are working. 79 00:05:27,820 --> 00:05:34,550 ‫If I jump on to maybe see streaks, if you see if you scroll down, this is bikini top. 80 00:05:34,550 --> 00:05:39,700 ‫It doesn't matter if one parent is what child is, they are dependent on viewport. 81 00:05:39,710 --> 00:05:41,210 ‫That means this screen. 82 00:05:41,630 --> 00:05:42,590 ‫So this is the one. 83 00:05:42,920 --> 00:05:46,070 ‫The second is we are dependent on this, David said. 84 00:05:46,160 --> 00:05:49,640 ‫So all the content inside this Deb will be inside itself. 85 00:05:50,120 --> 00:05:51,470 ‫So these are the two things. 86 00:05:51,740 --> 00:05:57,530 ‫Now let's understand what is this position and how we are going to walk with my default position is 87 00:05:57,530 --> 00:05:58,040 ‫static. 88 00:05:58,050 --> 00:06:02,990 ‫That means we have some position by default and it is selected both static. 89 00:06:05,120 --> 00:06:08,280 ‫That means we are following the natural flow first, second, third. 90 00:06:08,300 --> 00:06:09,260 ‫Everything is fine. 91 00:06:12,530 --> 00:06:19,040 ‫Let me also add some margin here, so we can define some different. 92 00:06:20,350 --> 00:06:24,130 ‫You know, so in static, we are following the parent route. 93 00:06:24,220 --> 00:06:27,010 ‫That's not true, and everything is fine. 94 00:06:27,760 --> 00:06:34,930 ‫So this is our first child, the second the start all out of falling static, but we have the second 95 00:06:34,930 --> 00:06:37,660 ‫setting as position as really do. 96 00:06:37,900 --> 00:06:40,030 ‫So if I position us relative. 97 00:06:41,950 --> 00:06:43,060 ‫Nothing happens. 98 00:06:43,180 --> 00:06:44,230 ‫Everything is the same. 99 00:06:44,770 --> 00:06:51,940 ‫But now we have access to five values that can help us to customize this whole thing. 100 00:06:52,570 --> 00:07:00,520 ‫So these five values are provided plus z index travel means top right, bottom left as well as the Z 101 00:07:00,520 --> 00:07:01,060 ‫index. 102 00:07:02,890 --> 00:07:09,910 ‫Now what I mean by this related that means this item is here, but I can give a reference and move it 103 00:07:09,910 --> 00:07:12,130 ‫anywhere, according to my current position. 104 00:07:12,850 --> 00:07:14,740 ‫For example, if I don't. 105 00:07:16,460 --> 00:07:17,030 ‫One room. 106 00:07:18,170 --> 00:07:22,070 ‫Angela's left one room, save this one. 107 00:07:22,110 --> 00:07:22,850 ‫Get back here. 108 00:07:23,720 --> 00:07:28,580 ‫So from the previous position, it moved one room as well as one room. 109 00:07:29,990 --> 00:07:35,980 ‫So now it has moved from the previous position, previous position was from here. 110 00:07:36,860 --> 00:07:39,470 ‫It moved one name from top and left. 111 00:07:40,530 --> 00:07:44,760 ‫And this is something important to remember this is moving from previous position. 112 00:07:45,330 --> 00:07:48,180 ‫It is following the natural flow like the earlier one. 113 00:07:48,360 --> 00:07:51,840 ‫But now we have access to these values and we can customize. 114 00:07:53,040 --> 00:07:59,730 ‫The other important thing is, if we are using static, have we don't have access to these values rd, 115 00:07:59,730 --> 00:08:00,660 ‫stop and live. 116 00:08:00,810 --> 00:08:02,880 ‫So if I get back here, nothing happens. 117 00:08:03,180 --> 00:08:04,470 ‫But this is related. 118 00:08:07,210 --> 00:08:09,310 ‫I have access to these values. 119 00:08:11,570 --> 00:08:17,490 ‫So these values depend on the previous position of this element itself. 120 00:08:17,570 --> 00:08:18,710 ‫Remember this point? 121 00:08:22,030 --> 00:08:24,680 ‫By default, all these positions are static. 122 00:08:24,700 --> 00:08:26,950 ‫That means they are following the natural flow. 123 00:08:27,400 --> 00:08:30,490 ‫So if I use positions that they can. 124 00:08:32,320 --> 00:08:33,760 ‫And if I stop. 125 00:08:34,840 --> 00:08:40,900 ‫One of them, nothing will happen because this is the default value we they don't write it. 126 00:08:41,080 --> 00:08:41,980 ‫Nothing matters. 127 00:08:42,340 --> 00:08:47,560 ‫And if I jump here, nothing happens because this doesn't work with static values. 128 00:08:47,980 --> 00:08:50,380 ‫Remember this scene, this one? 129 00:08:50,920 --> 00:08:53,980 ‫So that's the first one static value by default. 130 00:08:53,980 --> 00:08:56,770 ‫We are having this setting with every element. 131 00:08:57,490 --> 00:08:59,270 ‫Now, the second one is related. 132 00:08:59,670 --> 00:09:00,510 ‫It's important. 133 00:09:00,520 --> 00:09:03,130 ‫And if you're going to understand this, it will help you a lot. 134 00:09:03,640 --> 00:09:06,010 ‫So let me I position the leader. 135 00:09:06,010 --> 00:09:06,880 ‫Save this one. 136 00:09:06,940 --> 00:09:07,750 ‫Get back here. 137 00:09:08,410 --> 00:09:09,490 ‫Nothing happens. 138 00:09:09,610 --> 00:09:10,090 ‫Why? 139 00:09:10,630 --> 00:09:11,760 ‫Because we need to pass. 140 00:09:11,770 --> 00:09:15,310 ‫Devalue top, bottom, whatever the position we want. 141 00:09:15,790 --> 00:09:18,680 ‫Here we just convey that or get this element. 142 00:09:18,700 --> 00:09:23,970 ‫The second element is now relative, but we need to pass value by default. 143 00:09:23,980 --> 00:09:26,650 ‫It is going to stay there only in relative. 144 00:09:27,220 --> 00:09:34,000 ‫Now, if I say dog one room, that means from my current position. 145 00:09:34,000 --> 00:09:40,270 ‫Remember in the letter we follow the natural flow, but we can customize that this value. 146 00:09:40,690 --> 00:09:46,900 ‫So whatever my position will be, the default position, I'm going to move one room from the top. 147 00:09:46,990 --> 00:09:48,730 ‫Now get back here. 148 00:09:49,690 --> 00:09:54,370 ‫You can see this green is move one room from the original position. 149 00:09:55,650 --> 00:09:59,190 ‫Maybe also, I left wondering, see? 150 00:10:01,000 --> 00:10:06,670 ‫You can see the original position was this no more than one room here and one room here. 151 00:10:07,360 --> 00:10:08,740 ‫I hope you got the idea. 152 00:10:09,700 --> 00:10:15,640 ‫So that means in the letter we follow the natural flow, whatever the original value is, but we can 153 00:10:15,640 --> 00:10:17,010 ‫customize and move it. 154 00:10:17,620 --> 00:10:22,800 ‫This is the second one pretty important since we are following the natural flow. 155 00:10:22,810 --> 00:10:26,410 ‫Everything is as it is, but we can also customize thing. 156 00:10:33,690 --> 00:10:41,160 ‫Now, let us discuss about position as absolute, the most important one, as well as the most interesting 157 00:10:41,160 --> 00:10:41,430 ‫one. 158 00:10:41,910 --> 00:10:47,160 ‫I'm 100 percent sure you are going to get confused, so be ready to watch this lecture twice. 159 00:10:47,760 --> 00:10:51,930 ‫What I'm going to do is I'm going to add position as absolute. 160 00:10:52,230 --> 00:10:53,070 ‫Save this one. 161 00:10:53,340 --> 00:10:54,150 ‫Get back here. 162 00:10:56,080 --> 00:10:56,440 ‫OK. 163 00:10:56,470 --> 00:11:00,430 ‫Things are not normal now, so for now, let me just remove this for a bit. 164 00:11:00,580 --> 00:11:01,400 ‫Come in this one. 165 00:11:01,420 --> 00:11:02,110 ‫Get back in. 166 00:11:02,560 --> 00:11:05,260 ‫So this is the normal state in which we are all walking. 167 00:11:05,620 --> 00:11:06,460 ‫We have pink. 168 00:11:06,580 --> 00:11:07,360 ‫We are green. 169 00:11:07,360 --> 00:11:08,290 ‫And we have yellow. 170 00:11:08,800 --> 00:11:09,460 ‫Looks fine. 171 00:11:10,240 --> 00:11:14,230 ‫But as soon as I add position as absolute. 172 00:11:15,950 --> 00:11:18,500 ‫OK, I have one piece missing married is gone. 173 00:11:18,980 --> 00:11:23,480 ‫So before that, I'm also going with Jane, this is I'm going to make it to them. 174 00:11:26,120 --> 00:11:28,160 ‫Save this one and now get back. 175 00:11:28,880 --> 00:11:32,930 ‫Now here you can see this is our second piece, which is green. 176 00:11:33,350 --> 00:11:40,280 ‫So what actually happened is green, Greenpeace is floating and it is floating on its current position. 177 00:11:41,300 --> 00:11:46,990 ‫So the space that was created for the dark green is now filled by this yellow light green one. 178 00:11:48,310 --> 00:11:56,830 ‫So in reality, what happened is our browser is only adjusting to jail child one and the child told. 179 00:11:57,920 --> 00:12:03,920 ‫The J2, which was green in color, is now floating in air. 180 00:12:04,520 --> 00:12:08,360 ‫If I refresh this one, you can see this is floating in the air. 181 00:12:09,810 --> 00:12:14,400 ‫Now how we are going to position this, and this is where the fun part begins. 182 00:12:14,880 --> 00:12:20,790 ‫So as soon as we add absolute, we have this child, but it is floating on its position. 183 00:12:21,270 --> 00:12:24,990 ‫So whatever the next element will be, it will take its place. 184 00:12:25,140 --> 00:12:26,670 ‫That means this is child three. 185 00:12:26,940 --> 00:12:31,230 ‫It will just arrange after child one because this child is floating. 186 00:12:32,330 --> 00:12:36,830 ‫That's the first part that means this is floating and it is not making any physical space. 187 00:12:37,550 --> 00:12:38,780 ‫I hope you got the idea. 188 00:12:39,470 --> 00:12:47,060 ‫Now the second part comes is whenever we apply a new type of top or bottom, any type of value, we 189 00:12:47,060 --> 00:12:49,100 ‫are going to see some magic. 190 00:12:49,520 --> 00:12:54,920 ‫So if I say top hat and if I say zero pixels, save this one. 191 00:12:56,640 --> 00:13:05,280 ‫Now goes to our viewport that does Europe said, if I are left there and says, Europe, excel, save 192 00:13:05,290 --> 00:13:05,760 ‫this one. 193 00:13:06,570 --> 00:13:09,250 ‫It goes to the browsers zero pixel. 194 00:13:09,450 --> 00:13:14,140 ‫I should say viewport, zero pixel, how this is happening, why this is happening. 195 00:13:14,160 --> 00:13:15,570 ‫That is the important point. 196 00:13:16,350 --> 00:13:25,440 ‫Now this position depends on beating any parent or insisting, I should say any ancestor that has some 197 00:13:25,890 --> 00:13:26,910 ‫position value. 198 00:13:28,180 --> 00:13:36,340 ‫So suppose our parent doesn't have any type of position property that is why it's not falling parent, 199 00:13:36,880 --> 00:13:39,860 ‫so its parent has some position property. 200 00:13:39,880 --> 00:13:43,720 ‫That is why I Child two is following the browser. 201 00:13:44,110 --> 00:13:50,920 ‫That means this storm left depend on parent, which has positioned property. 202 00:13:51,730 --> 00:13:59,320 ‫I know you are going to get confused, but what I'm going to say is that the child do is depend on a 203 00:13:59,320 --> 00:14:01,150 ‫parent on our ancestor. 204 00:14:01,180 --> 00:14:02,350 ‫It can be this day. 205 00:14:02,380 --> 00:14:07,810 ‫It can be a body which currently have opposition opposition property. 206 00:14:08,080 --> 00:14:14,010 ‫At this point of time, this doesn't have opposition property, so it is dependent on the browser for 207 00:14:14,050 --> 00:14:14,680 ‫its value. 208 00:14:15,130 --> 00:14:21,490 ‫If I don't have any type of value and if I just say opposition absolute, it is going to float only 209 00:14:21,790 --> 00:14:23,980 ‫float on its current point. 210 00:14:24,640 --> 00:14:36,040 ‫But as soon as I start adding dot zero pixel as well as left zero pixel, it will depend on interest. 211 00:14:36,250 --> 00:14:43,210 ‫Remember, I'm seeing ancestor ancestor, the nearest ancestor, which currently have a position value. 212 00:14:43,660 --> 00:14:44,890 ‫So this is the child. 213 00:14:45,280 --> 00:14:48,400 ‫The ancestor is live to disturb. 214 00:14:48,400 --> 00:14:49,990 ‫Have any position value? 215 00:14:50,000 --> 00:14:50,410 ‫No. 216 00:14:50,800 --> 00:14:54,760 ‫Then it's close to body and keep on falling for at the end of the day. 217 00:14:55,000 --> 00:14:57,040 ‫It is depending on browser for now. 218 00:14:57,550 --> 00:15:03,940 ‫But as soon as we add up position here, maybe relative save this one. 219 00:15:04,780 --> 00:15:08,800 ‫This is going to depend on our feeding this feeding. 220 00:15:08,830 --> 00:15:15,580 ‫This is Dave class feeding because now this has some position value in my head. 221 00:15:15,580 --> 00:15:17,320 ‫We are not considering static. 222 00:15:17,950 --> 00:15:20,770 ‫Static is by default, we are not considering it. 223 00:15:21,370 --> 00:15:28,030 ‫This need a position value which is either relative, either absolute or maybe fake static that we are 224 00:15:28,030 --> 00:15:28,600 ‫going to start. 225 00:15:28,720 --> 00:15:31,150 ‫This need some value other than static. 226 00:15:31,480 --> 00:15:34,960 ‫So if it is relative and if I save this one, get back here. 227 00:15:35,530 --> 00:15:41,260 ‫You can see this is our current position, which is dobbed zero as well as level zero. 228 00:15:41,830 --> 00:15:47,170 ‫Now if I see interop left, if I see right zero, save this one. 229 00:15:47,170 --> 00:15:47,920 ‫Get back here. 230 00:15:47,950 --> 00:15:49,180 ‫You can see right zero. 231 00:15:49,180 --> 00:15:51,790 ‫That means right from disappearing. 232 00:15:51,940 --> 00:15:53,050 ‫This David self. 233 00:15:53,800 --> 00:15:59,980 ‫So now remember, these values are depending on the ancestor which has Oposicion property. 234 00:16:00,310 --> 00:16:04,690 ‫In this case, this giant two is dependent on this. 235 00:16:04,690 --> 00:16:05,710 ‫Do why? 236 00:16:05,860 --> 00:16:08,050 ‫Because we are at our position relative. 237 00:16:08,410 --> 00:16:10,750 ‫But if I remove this one, same here. 238 00:16:10,960 --> 00:16:11,650 ‫Get back. 239 00:16:12,710 --> 00:16:16,530 ‫Now it's dependent on those that I hope you got the idea. 240 00:16:16,550 --> 00:16:23,480 ‫This is the most fun one, why most of these students, most of the audience, most of the instructors 241 00:16:23,480 --> 00:16:26,330 ‫don't understand this, and I'm serious about this point. 242 00:16:26,930 --> 00:16:30,890 ‫Most people don't understand this absolute and elitist thing. 243 00:16:31,550 --> 00:16:38,450 ‫The simple thing is, these values for absolute depend on and sister and sister, which currently have 244 00:16:39,080 --> 00:16:40,610 ‫opposition value. 245 00:16:41,240 --> 00:16:44,570 ‫Now this can get serious when we have multiple devs. 246 00:16:44,930 --> 00:16:47,750 ‫So that is why I want to take some complex example. 247 00:16:47,760 --> 00:16:51,800 ‫That is why I'm taking the second day of their second child. 248 00:16:52,220 --> 00:16:53,930 ‫OK, I hope you got the idea. 249 00:16:54,350 --> 00:16:57,590 ‫Now let me get back to this fight. 250 00:16:57,620 --> 00:17:00,170 ‫Wait, and let me remove this one. 251 00:17:01,070 --> 00:17:01,940 ‫Save this one. 252 00:17:01,970 --> 00:17:03,940 ‫Get back when things are normal. 253 00:17:03,950 --> 00:17:05,240 ‫I hope you got the idea. 254 00:17:05,540 --> 00:17:08,240 ‫What I'm going to do is I'm going to play with child one. 255 00:17:08,540 --> 00:17:16,430 ‫So if I say position absolute, what is going to happen at this point of time, I haven't provided any 256 00:17:16,430 --> 00:17:16,880 ‫value. 257 00:17:17,390 --> 00:17:20,480 ‫The first change we are going to say is this is going to float. 258 00:17:21,350 --> 00:17:24,020 ‫So this pink is floating and behind the scenes. 259 00:17:24,020 --> 00:17:26,780 ‫Child two and child three have taken their position. 260 00:17:27,110 --> 00:17:33,490 ‫If I get my kid, change decides, let's say to them, save. 261 00:17:33,980 --> 00:17:34,820 ‫Get back here. 262 00:17:35,300 --> 00:17:40,100 ‫You can see this is floating and these two are their current natural flow. 263 00:17:41,300 --> 00:17:45,740 ‫Now, if I provide any type of position, maybe one pixel. 264 00:17:47,020 --> 00:17:50,380 ‫As well as, let's say, left one big sell. 265 00:17:51,450 --> 00:17:55,600 ‫This is going to effort towards and sister, that is going to be this Dave. 266 00:17:56,010 --> 00:18:00,210 ‫And currently we don't have any position value that is going to browser. 267 00:18:00,390 --> 00:18:03,810 ‫And here you can see one big here and one pixel here. 268 00:18:04,470 --> 00:18:04,920 ‫Great. 269 00:18:05,370 --> 00:18:06,930 ‫And let's say a five pixel. 270 00:18:08,560 --> 00:18:12,910 ‫Save this one, get back here, you can see this is five pixel five pixel. 271 00:18:13,690 --> 00:18:23,890 ‫But as soon as I make any type of ancestors relative or maybe sticky figs, absolute, it is going to 272 00:18:23,890 --> 00:18:25,750 ‫follow this position. 273 00:18:25,750 --> 00:18:31,980 ‫Absolute, these values are going to follow the ancestor, whichever the ancestor nearest ancestor that 274 00:18:31,990 --> 00:18:34,270 ‫is currently following Oposicion value. 275 00:18:34,690 --> 00:18:37,930 ‫Get back here now this five pixel is from. 276 00:18:38,320 --> 00:18:40,090 ‫I got it on there. 277 00:18:41,440 --> 00:18:43,480 ‫I hope you got the idea, OK? 278 00:18:45,590 --> 00:18:46,630 ‫Now, if I see. 279 00:18:48,520 --> 00:18:52,270 ‫Bottom five pixel in. 280 00:18:53,400 --> 00:18:55,710 ‫You can see bottom from this point. 281 00:18:56,990 --> 00:19:01,520 ‫And left from this point on, this is falling on beating. 282 00:19:02,750 --> 00:19:03,950 ‫Remember this point? 283 00:19:04,670 --> 00:19:08,990 ‫So this combination of relative and position plays out really well. 284 00:19:09,260 --> 00:19:14,420 ‫Now we have flexibility to arrange any item inside out of in the. 285 00:19:16,990 --> 00:19:26,290 ‫Now I have if I take this as in Jim, get back here, you can see this item depends on the parent live. 286 00:19:26,770 --> 00:19:29,490 ‫If I said this is 15m. 287 00:19:31,090 --> 00:19:35,690 ‫This item depends on the pairing, and this is pretty important. 288 00:19:35,740 --> 00:19:40,690 ‫I have flexibility to arrange a child inside my Bennink anywhere I want. 289 00:19:40,990 --> 00:19:44,500 ‫It can be left, right, doll bottom anywhere. 290 00:19:49,670 --> 00:19:56,570 ‫I hope you got the idea, so that's this relation between religion and position is magical. 291 00:19:56,840 --> 00:20:00,380 ‫And remember, this can be asked during the interview. 292 00:20:00,420 --> 00:20:02,430 ‫This is this is actually the point. 293 00:20:02,450 --> 00:20:07,910 ‫This is a difficult question and a big section of students never understand this point. 294 00:20:08,360 --> 00:20:09,620 ‫So I hope you got the idea. 295 00:20:10,790 --> 00:20:11,900 ‫Let me remove these. 296 00:20:15,150 --> 00:20:17,580 ‫And you can see we are back to normal. 297 00:20:18,270 --> 00:20:22,560 ‫And let's jump on to the next one, which is positioned as fixed. 298 00:20:23,550 --> 00:20:33,730 ‫So here suppose if I take a position as fixed and if I bother, I LuthorCorp one room, save this one. 299 00:20:33,750 --> 00:20:34,590 ‫Get back here. 300 00:20:35,400 --> 00:20:38,370 ‫You can see after this one room, it is fixed. 301 00:20:38,610 --> 00:20:41,070 ‫What does this mean and how this is going to follow? 302 00:20:41,400 --> 00:20:45,390 ‫The first thing is this fix doesn't follow any natural flow. 303 00:20:45,750 --> 00:20:48,630 ‫The second thing is it just follows the viewport. 304 00:20:49,080 --> 00:20:55,320 ‫So whatever the size will be, it will take one REM as the difference and it is going to stick there. 305 00:20:56,930 --> 00:21:03,660 ‫One good example is let me add some high def instead of 20, let me take 50 them, save this one. 306 00:21:03,680 --> 00:21:10,250 ‫Get back here now, even if you see I can scrawl things, but this element is fixed in. 307 00:21:11,280 --> 00:21:17,160 ‫If you remember them, that's how this is going to be followed, or maybe if you remember the Amazon 308 00:21:17,160 --> 00:21:19,260 ‫page, the header is fixed. 309 00:21:20,470 --> 00:21:27,190 ‫So that's what this is going to work, but it is still following the margin now I maybe I want it to 310 00:21:27,190 --> 00:21:28,360 ‫be on the left side. 311 00:21:28,750 --> 00:21:33,830 ‫So what I can do is I can see left and I can say zero room. 312 00:21:34,000 --> 00:21:35,650 ‫Save this one and get back here. 313 00:21:35,920 --> 00:21:38,020 ‫You can say it's now on left zero REM. 314 00:21:38,770 --> 00:21:47,050 ‫Maybe I want it at the bottom, so save bottom and head I can utilize on the right corner, right? 315 00:21:48,280 --> 00:21:52,860 ‫One on one as well as right one, save the Swan and get back here. 316 00:21:53,190 --> 00:22:00,150 ‫You see, it's here now doesn't matter what is the screen size, it doesn't matter what is your view 317 00:22:00,150 --> 00:22:02,190 ‫or you scroll down or not. 318 00:22:02,580 --> 00:22:07,140 ‫This is fixed here, just like our previous example. 319 00:22:07,170 --> 00:22:08,520 ‫This is fixed here. 320 00:22:10,540 --> 00:22:14,110 ‫So that's how this is going to work, and this will position folks well. 321 00:22:15,180 --> 00:22:16,980 ‫I hope you got the idea about fixed. 322 00:22:17,400 --> 00:22:19,280 ‫We are not forming natural flow. 323 00:22:19,290 --> 00:22:21,780 ‫Also, we don't care about scrawl. 324 00:22:22,410 --> 00:22:27,030 ‫We are flowing on the screen and depend on viewport directly. 325 00:22:27,270 --> 00:22:32,160 ‫So if whatever the value I'm giving, it is according to screen and not according to the patent. 326 00:22:33,060 --> 00:22:33,780 ‫That's great. 327 00:22:34,230 --> 00:22:36,200 ‫Now the next one is sticky. 328 00:22:36,270 --> 00:22:40,800 ‫It's pretty important and it is useful to create navigation bar and other things. 329 00:22:41,190 --> 00:22:47,310 ‫If I get back here on the regulatory school website, if you see this navigation bar is normal, but 330 00:22:47,310 --> 00:22:51,360 ‫as soon as I scroll and stick to the top, get back here. 331 00:22:51,600 --> 00:22:52,530 ‫It's normal. 332 00:22:52,620 --> 00:22:56,280 ‫Scroll, stick to the top how it is going to work. 333 00:22:56,730 --> 00:22:59,730 ‫So what we can do is we can add sticky here. 334 00:23:03,130 --> 00:23:05,740 ‫By default, it follows the natural flow. 335 00:23:05,770 --> 00:23:09,550 ‫So get back here, it's natural, everything is natural. 336 00:23:10,150 --> 00:23:12,910 ‫So it will remain on its natural position. 337 00:23:13,450 --> 00:23:18,550 ‫But whatever the value we give, once it gets that it will take. 338 00:23:19,880 --> 00:23:20,690 ‫Save this one. 339 00:23:21,110 --> 00:23:26,660 ‫Everything is natural, but as soon as I touch these zero percentage of top. 340 00:23:27,850 --> 00:23:29,970 ‫It's like now you can see it's pick. 341 00:23:33,090 --> 00:23:41,190 ‫As soon as I go back to natural position, it's there, but as soon as I touch the zero, top it stick. 342 00:23:42,000 --> 00:23:46,170 ‫So this is important in terms of navigation, actually. 343 00:23:46,380 --> 00:23:50,400 ‫So most of the time you will see sticky for the not navigation only. 344 00:23:51,360 --> 00:23:52,800 ‫I hope you got the idea. 345 00:23:53,040 --> 00:23:55,070 ‫So basically, this is following relative. 346 00:23:55,440 --> 00:24:00,270 ‫But as soon as it touched the top as zero tons and no fixed notice fixed. 347 00:24:00,660 --> 00:24:01,720 ‫But now back to. 348 00:24:02,640 --> 00:24:04,410 ‫So that's how the stick is followed. 349 00:24:05,610 --> 00:24:10,410 ‫So that's all these are the five values, let me do a quick revision, most of these children don't 350 00:24:10,410 --> 00:24:11,250 ‫understand us. 351 00:24:13,770 --> 00:24:18,460 ‫The first position has started simple, everything is following the natural way. 352 00:24:18,480 --> 00:24:24,360 ‫Whatever we have been doing to now, also these values doesn't work with this tactic. 353 00:24:24,960 --> 00:24:26,640 ‫The second one is related. 354 00:24:26,670 --> 00:24:34,200 ‫That means we are following the natural flow, but we can provide these values to move our elements. 355 00:24:35,070 --> 00:24:40,830 ‫I understood, OK, if I am at the second position, I will remain on the second position, but I can 356 00:24:40,830 --> 00:24:44,580 ‫provide top, bottom or whatever the value is to move here and there. 357 00:24:45,000 --> 00:24:45,450 ‫Great. 358 00:24:46,740 --> 00:24:54,180 ‫Then we have absolute that means I'm not going to follow the natural position, I will follow the interest. 359 00:24:54,330 --> 00:24:55,530 ‫That is my opinion. 360 00:24:55,980 --> 00:24:59,290 ‫And you can move according to top, bottom, left and right. 361 00:24:59,310 --> 00:25:01,680 ‫So this means that I'm flowing. 362 00:25:01,980 --> 00:25:08,400 ‫I want all the other element and I'm not following the natural flow and whatever the position you give, 363 00:25:08,400 --> 00:25:10,230 ‫I will follow, according to my opinion. 364 00:25:10,650 --> 00:25:15,120 ‫So suppose this is debate and I will follow to appear left here, right here. 365 00:25:16,020 --> 00:25:16,890 ‫You got it there. 366 00:25:16,890 --> 00:25:19,780 ‫Brings on debate and then we have fixed. 367 00:25:19,800 --> 00:25:22,380 ‫That means I don't care about better now. 368 00:25:22,590 --> 00:25:23,780 ‫I care about you. 369 00:25:24,420 --> 00:25:27,300 ‫So if you'll give bottom right, I will be here. 370 00:25:27,300 --> 00:25:29,640 ‫If you give bottom left, I will be had. 371 00:25:29,740 --> 00:25:35,910 ‫Doesn't matter where my parents, even if I'm on the second position after this block, I don't care 372 00:25:35,910 --> 00:25:36,630 ‫about bearing. 373 00:25:36,960 --> 00:25:37,560 ‫That's all. 374 00:25:38,280 --> 00:25:39,570 ‫So if I get back here. 375 00:25:41,140 --> 00:25:48,580 ‫Now, the last one was about sticky that those will be fixed here, but as soon as I left my position 376 00:25:48,580 --> 00:25:49,600 ‫required position. 377 00:25:50,660 --> 00:25:54,830 ‫I will go back to the normal that is my relative position. 378 00:25:55,550 --> 00:25:56,930 ‫I hope you got the idea. 379 00:25:57,080 --> 00:26:01,760 ‫We will discuss about this more during our short project and that will clear all your doubt. 380 00:26:02,390 --> 00:26:03,360 ‫Thank you for following. 381 00:26:03,380 --> 00:26:04,520 ‫Make sure you read this one. 382 00:26:04,520 --> 00:26:10,790 ‫Make sure you try all these values yourself simple and more creative with beating three goals. 383 00:26:11,450 --> 00:26:13,970 ‫Then try experiment all of these values. 384 00:26:16,350 --> 00:26:16,830 ‫OK. 385 00:26:16,860 --> 00:26:18,330 ‫This was a long session. 386 00:26:18,460 --> 00:26:20,100 ‫And I see you guys in the next one.