1 00:00:01,340 --> 00:00:04,280 Now though we understand the difference between relative and absolute. 2 00:00:04,310 --> 00:00:08,930 We're going to take a look at a set of four different properties that are very closely related. 3 00:00:08,930 --> 00:00:12,570 They are top bottom left and right. 4 00:00:12,590 --> 00:00:17,420 These properties are going to feel very similar to margin but they behave slightly differently. 5 00:00:17,500 --> 00:00:22,460 So top bottom left and right are going to add in a little bit of extra spacing between one element and 6 00:00:22,460 --> 00:00:23,480 a sibling. 7 00:00:23,480 --> 00:00:29,360 However that extra spacing is added in after everything gets placed on the screen so we can kind of 8 00:00:29,360 --> 00:00:35,510 imagine that we normally would lay out to Child 1 2 and 3 like so with all things being equal after 9 00:00:35,510 --> 00:00:40,980 that React Native is then going to come back to child to here and then shift it down essentially add 10 00:00:40,980 --> 00:00:45,710 in top unit first me 10 units of spacing on the top edge of that element. 11 00:00:45,710 --> 00:00:50,990 So it's going to move child to down 10 units like so during this process. 12 00:00:51,000 --> 00:00:53,180 No other siblings are going to be affected. 13 00:00:53,250 --> 00:00:55,890 So child 3 is going to stay exactly where it is. 14 00:00:55,920 --> 00:01:02,510 So essentially we're going to now display a portion of child 2 ON TOP OF CHILD 3 very similar for bottom 15 00:01:02,510 --> 00:01:03,100 as well. 16 00:01:03,140 --> 00:01:08,990 We're going to lay everything out as per usual rules were then going to come back and shift child to 17 00:01:09,290 --> 00:01:12,740 up or essentially 10 units off the bottom edge. 18 00:01:12,770 --> 00:01:14,870 Same thing for left and right. 19 00:01:14,870 --> 00:01:19,770 So we would position 1 2 and 3 and then add on 10 units on the left hand side. 20 00:01:19,880 --> 00:01:23,030 Same thing for a right of 10 as well. 21 00:01:23,180 --> 00:01:29,950 So let's try these out quick test as well so back of a hearing and a fine text to style once again I'm 22 00:01:29,950 --> 00:01:35,800 going to remove the position absolute property and I'll add in a top of ten just like we saw in those 23 00:01:35,800 --> 00:01:41,370 diagrams I'm also gonna change on the parent element I'm going to remove that line items of Fleck sent 24 00:01:42,170 --> 00:01:43,870 yes I'll save this. 25 00:01:43,870 --> 00:01:48,790 Now we can see that we have one two and three layout normally but now Child 2 has been shifted down 26 00:01:49,030 --> 00:01:56,890 by 10 units from its top edge this is going to cause child 2 to kind of overlap or essentially in this 27 00:01:56,890 --> 00:02:04,240 case display behind child 3 we can instead say give me a bottom of 10 and just as we saw on that diagram 28 00:02:04,420 --> 00:02:09,080 that's going to essentially add in 10 units of spacing on the bottom edge of child 2. 29 00:02:09,250 --> 00:02:16,900 So at this we can refresh and that's going to shift child to up let's try a quick left of 10 as well 30 00:02:17,320 --> 00:02:21,820 so it's going to add ten units the spacing on the left hand side and now in this case it's really subtle 31 00:02:21,820 --> 00:02:27,970 kind of hard to see but now Child 2 is essentially X extending beyond the limits of its parent view. 32 00:02:27,970 --> 00:02:33,070 So at this top bottom left and right we can really get some element to escape it's balance so to speak 33 00:02:33,520 --> 00:02:38,200 and display itself outside of some parent element there are a couple of cases where we're definitely 34 00:02:38,200 --> 00:02:43,270 going to want to do this all right so that's top left right hand bottom. 35 00:02:43,340 --> 00:02:48,230 In a nutshell so now let's take a quick pause right here we're going to cover one corner case around 36 00:02:48,320 --> 00:02:52,940 top bottom left right and position absolute in the next video and then we're going to combine these 37 00:02:52,940 --> 00:02:59,810 three different layout systems together and understand how react native in total lays out a set of elements 38 00:02:59,840 --> 00:03:00,410 on the screen.