1 00:00:00,420 --> 00:00:01,140 Hello everyone. 2 00:00:01,350 --> 00:00:02,850 And welcome back. 3 00:00:02,850 --> 00:00:09,320 In today's video you learn about opposition in Yemen elements CSX provides us with the following position 4 00:00:09,320 --> 00:00:15,550 by using static relative absolute fixed and sticky. 5 00:00:16,020 --> 00:00:21,310 Let's try the first one stop it is there different violence with extreme elements. 6 00:00:21,570 --> 00:00:28,730 Whether we declare it or not elements our position and no order on the beach let us strike one example 7 00:00:28,770 --> 00:00:32,320 on the sun but don't say we've got this image here. 8 00:00:32,480 --> 00:00:36,450 So let's try getting the position static so let's make a buck with it. 9 00:00:39,280 --> 00:00:47,580 OK so so we've already got an idea for the image mounted image. 10 00:00:47,860 --> 00:00:54,560 So you're let stating the position say position. 11 00:00:54,790 --> 00:00:57,470 Static let's say that. 12 00:00:58,390 --> 00:01:04,040 And as you can see nothing changes let's try bringing it the bottom moneys. 13 00:01:04,100 --> 00:01:10,940 So it's a top 16 pixels or lets a hundred pixels. 14 00:01:11,510 --> 00:01:20,450 Let's try getting a left of our Lucy vixens and as you can see these values aren't affecting we are 15 00:01:20,450 --> 00:01:24,740 going to make this position in the normal order. 16 00:01:24,740 --> 00:01:31,850 Moving on to the next one which is finishing relative positions extreme elements relative to their normal 17 00:01:31,850 --> 00:01:38,870 position making an extreme attainment relative gives you access to the elements from its normal position 18 00:01:38,900 --> 00:01:42,250 by using Top Right Bottom Left properties. 19 00:01:42,920 --> 00:01:49,510 Let's try an example in the standard that doesn't say you have this image on this image is not any different. 20 00:01:49,550 --> 00:01:51,600 So if you open the good. 21 00:01:52,130 --> 00:02:00,300 So we've got an image about an idea let's try giving us a position relative so let's remove these models. 22 00:02:00,350 --> 00:02:02,420 Let's give it a position relative. 23 00:02:02,870 --> 00:02:10,280 Let's say that as you can see nothing changes by default but do move this image to enough to use the 24 00:02:10,280 --> 00:02:13,590 top right bottom and that's problematic. 25 00:02:13,930 --> 00:02:19,200 And before we do that let's change the dynamic shifts of the day to completely about the image. 26 00:02:19,250 --> 00:02:23,090 Think of it like it represents the original position of the image. 27 00:02:24,110 --> 00:02:31,400 So the width and height is to enter pixels so that seems the same for our purposes with 300 pixels height 28 00:02:31,940 --> 00:02:33,640 300 pixels. 29 00:02:33,980 --> 00:02:36,370 It is got about a top so let's remove that. 30 00:02:37,160 --> 00:02:44,810 Let's add some margin on the top say 80 pixels and let's add some model on the left see 80 pixels. 31 00:02:44,810 --> 00:02:46,820 Let's save it. 32 00:02:46,850 --> 00:02:49,960 Now obviously completely behind that image. 33 00:02:50,840 --> 00:02:51,520 So let's go. 34 00:02:51,800 --> 00:02:53,370 I got value to our image. 35 00:02:53,430 --> 00:02:57,760 So top saying sixteen pixels. 36 00:02:57,980 --> 00:03:01,700 As you can see the image moved sixteen pixels from the top edge. 37 00:03:02,930 --> 00:03:08,120 Let's try increasing the value say 36 pixels. 38 00:03:08,290 --> 00:03:11,450 And as you can see image move more towards the bottom. 39 00:03:11,480 --> 00:03:15,170 So it is 36 pixels from the top edge. 40 00:03:15,660 --> 00:03:18,340 Similarly let's try right. 41 00:03:18,440 --> 00:03:20,890 So let's say 10 pixels. 42 00:03:21,180 --> 00:03:25,510 And as you can see some images now then pixels of which on the right edge. 43 00:03:26,000 --> 00:03:28,680 Let's try and create the value of say 32. 44 00:03:29,080 --> 00:03:31,640 And it is more away from the right edge. 45 00:03:32,180 --> 00:03:34,040 Let's try our negative value. 46 00:03:34,030 --> 00:03:35,580 First let me do zero. 47 00:03:36,380 --> 00:03:38,240 It's not acceptable to be on the right page. 48 00:03:38,300 --> 00:03:43,250 So if you give a negative value C minus 16 pixels it moves to the right. 49 00:03:43,700 --> 00:03:45,770 So it's going in the negative direction off. 50 00:03:46,430 --> 00:03:47,940 All right edge. 51 00:03:48,650 --> 00:03:55,060 That's how we use this position relative to move the element from its original position. 52 00:03:55,100 --> 00:04:01,010 So as you can see here on the top bottom we've got these many likeness and they don't seem in the same 53 00:04:01,010 --> 00:04:08,240 do vertically normally to move it down we could all use modern dot on the bottom button but it wouldn't 54 00:04:08,240 --> 00:04:11,210 work here because these are the main elements. 55 00:04:11,210 --> 00:04:12,970 So let's try it out first. 56 00:04:12,980 --> 00:04:17,180 So this is the glass for menu item. 57 00:04:17,430 --> 00:04:25,170 So let's try giving a margin Doc say 30 pixels and as you can see still in the same position. 58 00:04:25,170 --> 00:04:30,590 Let's try again in the bottom drops a total six thirty pixels. 59 00:04:30,930 --> 00:04:32,710 Again no difference. 60 00:04:33,210 --> 00:04:39,540 So do means that we can use the position but and then use the top relative to move towards the top. 61 00:04:40,290 --> 00:04:43,640 Let's try that C position relative. 62 00:04:44,160 --> 00:04:44,730 Let's say that. 63 00:04:45,660 --> 00:04:50,180 Now let's say opposite it's in the same position. 64 00:04:50,290 --> 00:04:56,750 Let's try giving it a negative value to talk so that it means towards the top edge. 65 00:04:57,490 --> 00:05:00,660 So let's say minus 60 pixels. 66 00:05:01,160 --> 00:05:01,510 Okay. 67 00:05:01,520 --> 00:05:03,960 You it do too much too. 68 00:05:03,970 --> 00:05:04,540 That's right. 69 00:05:04,540 --> 00:05:11,580 When it's done let's run minus eight minus five. 70 00:05:11,950 --> 00:05:14,050 That looks much better. 71 00:05:14,050 --> 00:05:20,140 All right so moving on to the next one which is position absolute it positions the exterior element 72 00:05:20,560 --> 00:05:24,690 relative to the first an element that has a position other than a static. 73 00:05:25,180 --> 00:05:31,680 Let's try an example from the standard but don't say you have this image of Bob and then Derek let's 74 00:05:31,690 --> 00:05:34,040 make the bit in the US position. 75 00:05:34,480 --> 00:05:39,340 So this is output isn't made index on its position relative. 76 00:05:39,460 --> 00:05:45,220 And let's give this image as an absolute so position absolute. 77 00:05:45,220 --> 00:05:46,070 Let's save it. 78 00:05:46,600 --> 00:05:48,850 Let's write do want to say double zero. 79 00:05:50,290 --> 00:05:51,870 Let's say let. 80 00:05:53,020 --> 00:05:55,990 As you can see the image moves to the top image of the beating death. 81 00:05:56,530 --> 00:05:59,340 Similarly if we give another galaxy. 82 00:05:59,340 --> 00:06:03,850 Left twenty pixels unseen. 83 00:06:04,870 --> 00:06:10,960 It starts other 20 images from the left edge of the body to see me watching this on the right hand side. 84 00:06:10,990 --> 00:06:13,690 So we could do something like this right. 85 00:06:13,750 --> 00:06:15,280 Zero. 86 00:06:15,560 --> 00:06:24,150 Otherwise you go nuts on the top right corner similarly if you wanted to move it to the bottom right 87 00:06:24,360 --> 00:06:26,920 corner we could do something like this or not. 88 00:06:26,940 --> 00:06:33,600 We can use bottom and now as you can see it is on the bottom right corner of the building. 89 00:06:34,680 --> 00:06:40,350 So as I mentioned earlier this absolute position element is relative to the first the element that has 90 00:06:40,490 --> 00:06:42,360 the other than static. 91 00:06:43,380 --> 00:06:46,620 So let's say none of the Creator touch position is staggering. 92 00:06:47,310 --> 00:06:52,530 So in that case it is position relative did not mean it's human element. 93 00:06:52,530 --> 00:06:59,720 So let's right and we're in this position relative. 94 00:06:59,910 --> 00:07:01,140 Let's bring it back to the 95 00:07:04,100 --> 00:07:05,480 top left corner. 96 00:07:06,440 --> 00:07:13,250 Let's say that are not as you can see it's on the top left corner like the beach but if you notice it's 97 00:07:13,250 --> 00:07:14,930 coming on top of that number. 98 00:07:16,100 --> 00:07:18,770 So far we have that x and y axis. 99 00:07:18,770 --> 00:07:26,320 So basically we have a move and then means left dry dog on bottom but we haven't moved elements in and 100 00:07:26,450 --> 00:07:33,090 out or in other words we're taking to the plate of ice cream for this group which we can use another 101 00:07:33,090 --> 00:07:35,480 property point Z next. 102 00:07:35,600 --> 00:07:42,130 This is index property can only be used one position has a value other than static not avoid this or 103 00:07:42,180 --> 00:07:45,470 really give out but by Ohio's index. 104 00:07:45,470 --> 00:07:46,820 So that's been about a it. 105 00:07:48,740 --> 00:07:58,280 So this is our dog bar let's say Z next then let's say that nothing changes because he makes a box on 106 00:07:58,280 --> 00:08:01,190 position like these other stepping. 107 00:08:01,400 --> 00:08:09,420 So that seems like let's well inclusion relative now as you can see are images below the dog. 108 00:08:10,150 --> 00:08:11,230 That's all for the device. 109 00:08:11,290 --> 00:08:16,990 If there's something that you do not understand feel free to drop a comment and we will discuss it see 110 00:08:16,990 --> 00:08:19,670 you in the next video by anti-gay.