1 00:00:00,630 --> 00:00:03,390 Hello and welcome to this video. 2 00:00:03,430 --> 00:00:13,660 In this video I will be explaining what the fixed position is when a elemen has a fixed position. 3 00:00:13,920 --> 00:00:19,770 It remains in the same position regardless of which way the scrolls. 4 00:00:19,770 --> 00:00:24,890 So you can scroll up or scroll down that term suppose a shot will be fixed. 5 00:00:24,900 --> 00:00:26,470 Let me show you. 6 00:00:26,850 --> 00:00:29,600 This is a fixed position. 7 00:00:29,610 --> 00:00:31,170 This little blue box. 8 00:00:31,380 --> 00:00:39,000 And this is some tape so you'll watch regardless of which way I scroll that position remains fixed because 9 00:00:39,060 --> 00:00:42,640 that's the way I have positioned it to be fixed. 10 00:00:42,810 --> 00:00:44,230 So you can position it anywhere. 11 00:00:44,240 --> 00:00:50,130 I could have positron it right on the bottom of the screen here but longo's is in a fixed position. 12 00:00:50,190 --> 00:00:54,420 It will not move regardless of where you scroll. 13 00:00:54,420 --> 00:00:57,690 You can scroll up scroll down sideways. 14 00:00:57,710 --> 00:00:58,990 It will not more. 15 00:00:59,180 --> 00:01:02,800 So basically this is what fixed position does. 16 00:01:02,850 --> 00:01:11,310 So if you've got some content you want to remain fixed like images and stuff like that you can use a 17 00:01:11,370 --> 00:01:16,060 fixed position to achieve that even when the page is printed. 18 00:01:16,170 --> 00:01:20,310 That position will remain fixed on the printed document. 19 00:01:20,550 --> 00:01:28,320 So the fixed position does not leave any space for that element. 20 00:01:28,320 --> 00:01:36,510 So the position is relative to this screen viewport that most is relative regardless of whether you 21 00:01:36,510 --> 00:01:39,750 move or down sideways. 22 00:01:39,750 --> 00:01:41,880 The position is fixed. 23 00:01:43,780 --> 00:01:52,390 This is the Seer says responsible for setting the position of this blue box here. 24 00:01:52,510 --> 00:01:57,460 So you begin with the word position as a prop.. 25 00:01:57,610 --> 00:02:04,660 And they followed by a colon and then you need to specify the type of position in this case the type 26 00:02:04,660 --> 00:02:06,670 of position is fixed. 27 00:02:06,700 --> 00:02:10,500 So you need to specify that was specified. 28 00:02:10,590 --> 00:02:21,620 You then on the next line you specify either top or left as a value as a property. 29 00:02:21,640 --> 00:02:24,160 So I've specified the top. 30 00:02:24,160 --> 00:02:32,560 I wanted to put xishun at the top of the document but 80 pixels from the top. 31 00:02:32,620 --> 00:02:35,380 So I say top left. 32 00:02:35,650 --> 00:02:40,460 So this is the top of the document and left up the document right. 33 00:02:40,480 --> 00:02:41,770 Would be the opposite direction. 34 00:02:41,770 --> 00:02:44,630 So this is top left and from the top. 35 00:02:44,660 --> 00:02:52,390 Told it'll move down 80 pixels so that's why as drug done 80 pixels from the top and at all the top 36 00:02:52,450 --> 00:02:54,480 left if not the left. 37 00:02:54,670 --> 00:03:01,720 I'm going in the 10 pixels from the left so from left here have told it to move 10 pixels and is moved 38 00:03:01,720 --> 00:03:04,540 10 pixels from the left. 39 00:03:04,540 --> 00:03:06,850 Top right bottom left. 40 00:03:06,990 --> 00:03:10,700 Well I've specified the here is 80 pixels from the top. 41 00:03:10,700 --> 00:03:13,820 Move Haiti and left from the left here. 42 00:03:13,840 --> 00:03:24,380 Move 10 pixels has been position was meant is position is fixed regardless of what direction you move. 43 00:03:24,490 --> 00:03:30,320 If you look at it scroll through and you see that you look at the make list is fixed. 44 00:03:30,320 --> 00:03:31,440 It does move. 45 00:03:31,450 --> 00:03:34,860 His stand is ground regardless of where you scroll. 46 00:03:34,870 --> 00:03:35,590 You see that. 47 00:03:35,720 --> 00:03:43,990 So this is achieved using the position property with the value of fixed and then also set in the top 48 00:03:44,440 --> 00:03:51,960 property of the element with a piece of value and then set in the left with picks. 49 00:03:52,420 --> 00:04:04,300 So any other properties here and values are just associated to make the two may be all the box look 50 00:04:04,300 --> 00:04:05,300 nice. 51 00:04:05,300 --> 00:04:09,310 Well the key thing here is the position. 52 00:04:09,310 --> 00:04:16,600 What is responsible for the position of that element which is position fixed and then given it a top 53 00:04:17,410 --> 00:04:25,240 value and the Left value has it's in the end since fixed so regardless of where I move the mouse it 54 00:04:25,520 --> 00:04:26,700 remains fixed. 55 00:04:26,710 --> 00:04:34,510 So this is useful for a website lay out because there may be elements you want to see in a certain position 56 00:04:34,510 --> 00:04:38,520 regardless of where you scroll or where the page is. 57 00:04:38,630 --> 00:04:42,390 So this should help you achieve that. 58 00:04:42,730 --> 00:04:51,820 In this video I explain what fixed position it's an elemen that is in a fixed position does not move 59 00:04:51,970 --> 00:04:56,680 regardless of the direction you move the page. 60 00:04:56,710 --> 00:04:59,670 You can scroll up or scroll down me. 61 00:04:59,690 --> 00:05:00,380 I'll amend. 62 00:05:00,400 --> 00:05:01,390 Well not more. 63 00:05:01,420 --> 00:05:05,510 He remains fixed to where it has been positioned. 64 00:05:05,830 --> 00:05:07,380 Thank you so much for watching. 65 00:05:07,390 --> 00:05:15,970 I hope you now have an idea of how to set a fixed position on elemen for a web page. 66 00:05:15,970 --> 00:05:16,710 Thanks Pam. 67 00:05:16,720 --> 00:05:17,730 Bye for now.