1 00:00:00,690 --> 00:00:03,360 Hello and welcome to this video. 2 00:00:03,420 --> 00:00:13,730 In this video I will be explaining some of the propertys and values that can be used to determine the 3 00:00:13,780 --> 00:00:23,880 display and position of an element on a web page or begin with the position property when set in the 4 00:00:23,880 --> 00:00:26,790 position of an element. 5 00:00:26,790 --> 00:00:31,370 There are different values you can use with the position. 6 00:00:31,530 --> 00:00:41,130 So if you want be positioning to be a relative you need to specify that first and then followed by the 7 00:00:41,130 --> 00:00:49,440 propertys off the top right bottom or left depending on where you want to apply the positioning by the 8 00:00:49,440 --> 00:00:55,550 first thing you do you determine the type of position because there are different types of position. 9 00:00:56,100 --> 00:00:58,500 Next you lie. 10 00:00:58,500 --> 00:01:01,130 For example I've specified a relative. 11 00:01:01,340 --> 00:01:05,510 And here I have specified an absolute position. 12 00:01:05,550 --> 00:01:08,170 You've got other types of position as well. 13 00:01:08,460 --> 00:01:10,060 Next the display. 14 00:01:10,060 --> 00:01:17,070 The display property is used to determine how an element is displayed. 15 00:01:17,440 --> 00:01:26,100 So by default when the equity they are displayed in line or block elements blog elements are displayed 16 00:01:26,160 --> 00:01:28,870 on separate lines why exist. 17 00:01:28,940 --> 00:01:37,500 Why in line element are stacked top horizontally so you can use the display property to determine where 18 00:01:37,890 --> 00:01:46,380 or how an element is displayed in line means stack them up horizontally display in line block means 19 00:01:46,680 --> 00:01:56,440 stack them up horizontally but as block elements are another property weak in use is a float property. 20 00:01:56,530 --> 00:02:05,460 The value of property float property is used to determine which direction an element should be floated 21 00:02:05,480 --> 00:02:06,210 to. 22 00:02:06,510 --> 00:02:17,250 You can specify left or right and then you declare property declared property is usually used where 23 00:02:17,250 --> 00:02:26,430 you find the float property because it kind of mobbs Sought after the float property so whereby an elemental 24 00:02:26,430 --> 00:02:34,620 has been floated it can create an obstruction preventing other elements from occupying that space all 25 00:02:34,620 --> 00:02:40,790 floating in that same direction or it can affect the positioning of other elements. 26 00:02:41,040 --> 00:02:49,230 So you can use the clip property to clear the obstruction caused by the floating element. 27 00:02:49,260 --> 00:02:53,480 Another property you can use is the overflow. 28 00:02:53,760 --> 00:03:04,380 What the overflow does is use to hide content that has overflown is container like this red box. 29 00:03:04,380 --> 00:03:09,840 We call it if we have an image that spills out of this red box. 30 00:03:09,930 --> 00:03:18,780 We can use the overflow with a hidden value to click on the image and then hide where based left so 31 00:03:18,780 --> 00:03:22,610 you don't see any overflow outside the box. 32 00:03:22,650 --> 00:03:26,180 There are other values you can specify with the overflow. 33 00:03:26,220 --> 00:03:34,440 There is also there is cruel and a few others but the common ones that I use are head in and out of 34 00:03:34,860 --> 00:03:35,430 order. 35 00:03:35,430 --> 00:03:42,180 Does is that you hide it and or it can also create a scroll so that you can see the rest of the content 36 00:03:42,690 --> 00:03:44,640 after his being clipped. 37 00:03:44,850 --> 00:03:57,240 So these are the main property values that you can use to determine the position and display often eliminate 38 00:03:57,330 --> 00:03:59,200 on a web page. 39 00:03:59,220 --> 00:04:07,810 In this year we went through some on the display and position properties that can be used on a web page. 40 00:04:07,810 --> 00:04:15,600 We went through the position property Wayne specifying that you need to determine the type of position 41 00:04:15,660 --> 00:04:23,850 first and then proceed in that you specify the top right bottom level property. 42 00:04:23,850 --> 00:04:30,490 Depending on the property you want to apply the positioning effect to. 43 00:04:30,880 --> 00:04:38,100 We also mention the display property which determines how the elements are displayed either in like 44 00:04:38,280 --> 00:04:46,390 or in block or in line block which means stagged the mob horizontally by block. 45 00:04:46,450 --> 00:04:54,700 It's also out what a float is a floor property is used to float elements in a set in direction. 46 00:04:54,840 --> 00:04:59,460 He truly is left or right and then declare a property. 47 00:04:59,630 --> 00:05:07,070 Is used to clear the obstruction caused by the floating helmet and devalues ukin youthful that high 48 00:05:07,150 --> 00:05:08,210 right. 49 00:05:08,230 --> 00:05:10,940 Clear right clear left or clear. 50 00:05:10,960 --> 00:05:14,110 Both are murder property they can be used. 51 00:05:14,110 --> 00:05:22,840 Is it overflow overflow used to hide elemen now or grow its container. 52 00:05:22,840 --> 00:05:29,630 So if for example if you've got an image that is exceedingly akonting that you can use the overflow 53 00:05:29,650 --> 00:05:35,420 property to clip that image and hide the overflow from view. 54 00:05:35,740 --> 00:05:42,940 Thank you so much I hope the video has been useful and is giving you some insight into these syntax 55 00:05:43,100 --> 00:05:48,500 that can be use to specify position and display of an element. 56 00:05:48,730 --> 00:05:49,600 Thank you. 57 00:05:49,600 --> 00:05:50,490 Bye for now.