All right.
Continuing on with positioning and specifically the absolute value.
Now, I'm going to show you what happens if the parent element of an absolutely positioned element,
if the parent is itself positioned.
And remember, when I say something is positioned, that means it has a value other than the default
of static.
So we have quite a few positioned.
No, we don't.
We have one positioned element right now, this div with the class of special.
But if I were to, let's say, give all boxes a position of relative.
Now everything has been positioned still, though there's no parent child relationship.
These are just siblings.
So for this example, I'm going to just get rid of most of what we have.
Just work with a single box.
I don't need this special div anymore and I'm going to add a span inside the box that says Hi.
Okay, There's our span that says hi, and I'm going to give the box a position of relative, which
I already did.
Position is set to relative.
It takes up a normal space that it would.
But of course now I can move the box around by doing things like this.
But that's not the point of this video.
What I want to show is if I select that span in the box span in the box, it's a great song.
All right.
So I select the span inside the box class.
And why don't I make it a little bit, maybe a color of white just so it pops out a bit and then, yeah,
that's good enough.
Maybe a different background color.
Let's go with our orange.
Red.
Now, if I set this to have a position of absolute just like before in the previous video, now it is
a child of an element that is itself already positioned right position relative.
So if I set, let's say, right to be zero, it now behaves differently when an element is positioned.
Absolutely its top right, left, bottom, all those properties will manipulate it relative to its own
parent if that parent is positioned.
So there we are.
You'll see that it now moves over that span, goes all the way to the right edge of its parent, and
that's because its parent is positioned.
If I turn that off and save now, it goes all the way to the right side of the root HTML element.
And by the way, it's not going to the top corner, but it can as soon as I do something like this,
now, it goes to the top, right?
And I'm just setting them to zero.
But of course, I can use any value in here that I want.
I could set it to be 400 pixels, right?
And it's offset 400 pixels from that right edge.
But it's most effective.
I think just as an illustration, if I center it or if I put it at zero zero for the right and the top.
So that's kind of what makes position absolute a little confusing.
It's very dependent on the context, on the parent or any other parent.
It's not the direct parent necessarily, but any parent.
It could be five, six, seven levels up that is positioned.
It will be positioned relative to that parent.
So this in this case, it's just this one box, right?
It's a span inside the box.
This thing is positioned relative.
This is absolute.
And so any changes we make to top left, right, bottom are going to be based upon the bounds of this
box as we see there.
But as soon as I get rid of that and there's no other parent, no parent relative that is positioned,
then it defaults to the root HTML element and it goes to the top right corner, if that's what I've
specified of the entire root.
So that wraps up absolute.
If you're confused, I don't blame you.
We're going to get some practice in the next video with a tiny little demo.
We're going to make a little badge notification badge on a button, and we'll work with relative and
absolute positioning.
And I'll just wrap up real quick with a recap.
So absolute when we position something.
Absolutely.
It does not take up any space in the document.
It's removed from the normal flow and then we can position it with top right, bottom and left.
The way that those work depend on the positioning of that element's parent.
If there is a parent somewhere up the chain that is itself positioned, meaning not static, not the
default value, then our element that is absolutely positioned will be moved around relative to that
positioned element.
If there is no parent in the chain that is positioned, then top left, right and bottom will manipulate
our absolute element relative to the root.
Okay.
And remember, no space is left behind, unlike with relative where there's a gap left where an element
normally would sit and we move it relative to that spot, It's very different when we set it to be absolute.