Now though we understand the difference between relative and absolute.
We're going to take a look at a set of four different properties that are very closely related.
They are top bottom left and right.
These properties are going to feel very similar to margin but they behave slightly differently.
So top bottom left and right are going to add in a little bit of extra spacing between one element and
a sibling.
However that extra spacing is added in after everything gets placed on the screen so we can kind of
imagine that we normally would lay out to Child 1 2 and 3 like so with all things being equal after
that React Native is then going to come back to child to here and then shift it down essentially add
in top unit first me 10 units of spacing on the top edge of that element.
So it's going to move child to down 10 units like so during this process.
No other siblings are going to be affected.
So child 3 is going to stay exactly where it is.
So essentially we're going to now display a portion of child 2 ON TOP OF CHILD 3 very similar for bottom
as well.
We're going to lay everything out as per usual rules were then going to come back and shift child to
up or essentially 10 units off the bottom edge.
Same thing for left and right.
So we would position 1 2 and 3 and then add on 10 units on the left hand side.
Same thing for a right of 10 as well.
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
going to remove the position absolute property and I'll add in a top of ten just like we saw in those
diagrams I'm also gonna change on the parent element I'm going to remove that line items of Fleck sent
yes I'll save this.
Now we can see that we have one two and three layout normally but now Child 2 has been shifted down
by 10 units from its top edge this is going to cause child 2 to kind of overlap or essentially in this
case display behind child 3 we can instead say give me a bottom of 10 and just as we saw on that diagram
that's going to essentially add in 10 units of spacing on the bottom edge of child 2.
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
so it's going to add ten units the spacing on the left hand side and now in this case it's really subtle
kind of hard to see but now Child 2 is essentially X extending beyond the limits of its parent view.
So at this top bottom left and right we can really get some element to escape it's balance so to speak
and display itself outside of some parent element there are a couple of cases where we're definitely
going to want to do this all right so that's top left right hand bottom.
In a nutshell so now let's take a quick pause right here we're going to cover one corner case around
top bottom left right and position absolute in the next video and then we're going to combine these
three different layout systems together and understand how react native in total lays out a set of elements
on the screen.