Hi and welcome back.
Today we're going to be discussing positioning styling in react native.
In react native,
positioning refers to the layout and placement of UI components on the screen.
Understanding positioning is important
for building responsive and dynamic user interfaces.
By default, all react native components have position relative.
For example, if I were to add position relative right here,
you would see that nothing about Hello World would change. Same here,
which means that every element has
position relative set by default, and adding this style would change nothing.
So now let's talk about absolute positioning.
When you set position absolute,
the element is positioned relative to the nearest positioned ancestor.
Okay? So let's realize what this means exactly.
Right now, for example,
if we were to place another container around this,
both of these elements are positioned relative to this.
So now let's give this a style of
position relative, and we're going to see that nothing really changed.
But if I were to set a position
to absolute right here, we're going to see that this view
container actually moved right here and is positioned relative to its ancestor.
So since the ancestor is actually
a container that starts from the top right here, if we give this a background
color of green, we're going to see how big of a space this container takes up.
You're going to see that it starts from the top left corner right here,
which is why our Hello World Two moved over there.
So for example, if I were to change this
absolute positioning back to relative, this is going to move back to where it
was, but it is still actually inside the green container.
We just don't see it.
So if I were to give this container, for example, padding of 20,
you're going to see that this element is actually inside it.
Great.
So now I'm just going to get rid of this padding here and let's go back to our old
setup and give this an absolute positioning.
And let's talk about some
of the properties that you could use when you're using absolute positioning.
So you could use top, right, left, and bottom properties along with positioning.
So let's use top and say that we want space of top 10 from the top.
This is how you would achieve this.
Now if you want to have spacing relative
to your container and you want the spacing to be from the left side, five points,
let's say you would write this and this here would move a little bit to the left.
You can do the same to the right side
and say that you want this to be ten points away from the right side.
Now you see that the width of our
Hello World actually grew because we said that we want this to be ten points away
from the furthest right side of the container.
So if I change this to be zero, then it's actually going to go along until the end.
So now let's discuss how to move it from the bottom.
So if I say bottom here and I give it a value of ten,
the height of this container will grow and you will see this in action right here.
So this is how top, left, right and bottom work.
They're making this view container
have some spacing relative to its ancestor, which is this container here,
because this view container again is a child of this view container.
So we said that we wanted to be ten points away from the top of our ancestor.
We said that we want to be five points away from the left side.
From the right side we want it to be zero
points away, and from the bottom we want it to be ten points away.
So our view container had to change its
dimensions to match up with our instructions.
Now, Hello World Two is actually over our
Hello World container, as you see, and that's not visible anymore.
However, you can still make that visible and put it
on top of Hello World Two if you wanted to, and those are achieved by z indexes.
Z index property controls the stacking order
of positioned elements, and elements with higher z index value are
stacked on top of elements with lower z index values.
So for example, let's give this z index of
one and we're going to see that Hello, World is visible here.
So I'm just going to change the background
color of this and I'm going to make it yellow so that it's more visible.
And now you see that since this z index has higher order value than
Hello World Two, that has no z index defined at all,
this is going to be on top of the Hello World Two container.
However, if I give this z index value as
well, and I give it a value of two, then you're going to see that this
disappeared and is on the background again.
I would like to summarize for you
that positioning is an important concept in react native that controls the layout
and placement of UI components on the screen.
And by default, all components have position relative applied to it.
And you can use top, right, bottom and left properties to move
the element relative to its normal position. Setting position absolute
positions, the element relative to its newest positioned ancestor,
and z index controls the stacking order of positioned elements.
That's all for today.
Thanks so much for watching and I'll see you in the next video.