1
00:00:00,840 --> 00:00:03,580
In this video we're going to take a look at our last little property here.

2
00:00:03,600 --> 00:00:09,150
The position property so by default every element that we place has a position property with the value

3
00:00:09,150 --> 00:00:10,170
of relative.

4
00:00:10,320 --> 00:00:15,870
That essentially means just do things as usual if we want to we can override that property and instead

5
00:00:15,870 --> 00:00:17,760
change it to absolute.

6
00:00:17,760 --> 00:00:23,070
This is going to make a given element be completely ignored by its siblings when React Native tries

7
00:00:23,070 --> 00:00:26,400
to render our entire screen or layout these different elements.

8
00:00:26,790 --> 00:00:31,230
However that element is still going to choose to obey some different flex box rules.

9
00:00:31,230 --> 00:00:32,720
If they are set by the parent.

10
00:00:32,910 --> 00:00:38,460
So let's take a look at what happens when we set position of absolute ON CHILD 2 It's going to flip

11
00:00:38,460 --> 00:00:39,230
back over.

12
00:00:39,390 --> 00:00:46,830
I'm gonna find a text to style I'm going to remove a line self and I'll add in position of absolute

13
00:00:47,990 --> 00:00:54,630
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

14
00:00:54,640 --> 00:00:58,410
child 1 and Child 2 are actually being rendered right on top of each other.

15
00:00:58,660 --> 00:01:04,000
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

16
00:01:04,000 --> 00:01:08,080
set it to 18 to make it just a little bit larger okay.

17
00:01:08,120 --> 00:01:11,870
So now I can see child 1 and 2 are just about right on top of each other.

18
00:01:11,930 --> 00:01:18,110
So in this case text 2 has been completely ignored by its sibling elements so text 1 and 3 essentially

19
00:01:18,110 --> 00:01:22,820
are saying I'm just going to pretend that text 2 just doesn't even exist.

20
00:01:22,850 --> 00:01:28,400
However text 2 is still going to obey some different flex blocks properties set on the parent element

21
00:01:28,640 --> 00:01:33,710
in this case and a line items of center there are some different properties however or some different

22
00:01:33,710 --> 00:01:40,040
values of a line items that text 2 is going to choose to ignore the most important one is stretch.

23
00:01:40,130 --> 00:01:46,510
So if we set a line items of stretch on that parent element our text to style is going to completely

24
00:01:46,510 --> 00:01:47,260
ignore it.

25
00:01:47,410 --> 00:01:51,730
It will still move up to the top left hand side but it's not going to stretch the entire width of the

26
00:01:51,730 --> 00:01:53,110
screen.

27
00:01:53,110 --> 00:01:57,920
We can also do a a line items of say flex end.

28
00:01:57,940 --> 00:02:03,760
This is going to make our text to style continue to move to the top right hand side so it's obeying

29
00:02:03,820 --> 00:02:05,280
a line items of flex end.

30
00:02:05,290 --> 00:02:10,580
But once again it's completely ignoring its sibling elements of text 1 And text 3.

31
00:02:10,690 --> 00:02:15,490
So anytime we use this position of absolute property right here again it's going to make an element

32
00:02:15,610 --> 00:02:21,580
ignore its siblings but we still have to be aware that it might choose to position itself relative to

33
00:02:21,580 --> 00:02:24,730
the parent depending upon some flex box property.

34
00:02:24,920 --> 00:02:29,120
All right now there's one set of properties very closely related to this position thing.

35
00:02:29,140 --> 00:02:33,150
Let's take a quick pause and discuss this other set of properties in just a moment.