In this video we're going to take a look at our last little property here.
The position property so by default every element that we place has a position property with the value
of relative.
That essentially means just do things as usual if we want to we can override that property and instead
change it to absolute.
This is going to make a given element be completely ignored by its siblings when React Native tries
to render our entire screen or layout these different elements.
However that element is still going to choose to obey some different flex box rules.
If they are set by the parent.
So let's take a look at what happens when we set position of absolute ON CHILD 2 It's going to flip
back over.
I'm gonna find a text to style I'm going to remove a line self and I'll add in position of absolute
let's now save this and I'll go back to my demo and now you can kind of barely see it but in this case
child 1 and Child 2 are actually being rendered right on top of each other.
We can make that a little bit easier to see if we add on a font size to text to right here and I'll
set it to 18 to make it just a little bit larger okay.
So now I can see child 1 and 2 are just about right on top of each other.
So in this case text 2 has been completely ignored by its sibling elements so text 1 and 3 essentially
are saying I'm just going to pretend that text 2 just doesn't even exist.
However text 2 is still going to obey some different flex blocks properties set on the parent element
in this case and a line items of center there are some different properties however or some different
values of a line items that text 2 is going to choose to ignore the most important one is stretch.
So if we set a line items of stretch on that parent element our text to style is going to completely
ignore it.
It will still move up to the top left hand side but it's not going to stretch the entire width of the
screen.
We can also do a a line items of say flex end.
This is going to make our text to style continue to move to the top right hand side so it's obeying
a line items of flex end.
But once again it's completely ignoring its sibling elements of text 1 And text 3.
So anytime we use this position of absolute property right here again it's going to make an element
ignore its siblings but we still have to be aware that it might choose to position itself relative to
the parent depending upon some flex box property.
All right now there's one set of properties very closely related to this position thing.
Let's take a quick pause and discuss this other set of properties in just a moment.