Up next in 10
Learn CSS Position In 9 Minutes
641 views
Feb 7, 2024
"Learn CSS Position In 9 Minutes" is an instructional video aimed at teaching viewers about the CSS position property. The position property allows developers to control the placement of elements within the layout of a web page. The video likely covers the different values of the position property, such as "static," "relative," "absolute," and "fixed," explaining how each value affects the positioning of elements relative to their containing elements or the viewport. Additionally, the video may provide practical examples and demonstrations to illustrate how to use the position property effectively in creating various layout designs. By condensing the material into a short duration, the video offers a quick yet comprehensive introduction to CSS positioning, enabling viewers to enhance their web development skills and create more dynamic and responsive layouts. Viewers can expect to gain practical knowledge of CSS positioning within a brief timeframe.
View Video Transcript
0:00
Hello everybody, welcome back to WebDev Simplified
0:04
In today's video I'm going to be teaching you everything you need to know about CSS
0:07
positioning, so by the time that this video is over you're going to be positioning elements like a CSS god
0:12
Let's get started now. To demonstrate all five of the different CSS properties for position, I have a simple example
0:21
set up. We have a parent element, as well as three childs inside of that parent element, and
0:26
right now there's absolutely no position styles being applied to them, only these default
0:30
styles for coloring it. And if we come in here and we want to inspect one of these elements, to figure out how the
0:35
position is being applied by default, we can go to the computed tab, we can search for
0:39
position, and if we see right here, our position property is set to static by default
0:44
And static is the default position that all of your HTML elements will have when they
0:48
enter onto the page. And essentially all static positioning does is it says that it should follow the other
0:53
elements in the document flow, so whatever comes first in our HTML, for example child
0:58
number one, will be above child number two, and so on. So static positioning is just like how your HTML works when you type it out, and it's
1:05
what you're most used to. The next CSS position that we want to cover is relative position, and this works almost
1:11
exactly the same as static positioning. So if we go in here and we want to change our green child here, child number one, to
1:17
be positioned relative, and we save that, and you'll notice absolutely nothing over
1:21
here has changed. And that's because relative position acts exactly like static positioning, but it allows
1:27
you to do four specific things that static positioning does not, and that is that you
1:32
can change the top, left, right, and bottom of this element. So let me just show you an example of that
1:37
We can come in here and we can change the left, for example, to 10 pixels
1:41
If we save that, you see the element moves itself over 10 pixels, it even overflows its
1:46
parent by 10 pixels on the right side. And that's because relative allows you to actually change the position of the element
1:52
relative to where it normally would be in the document flow if it was statically positioned
1:57
So as you can see, normally this one would take up this space here inside of the parent
2:02
but because of the left 10, it's moved over 10 pixels. And for example, if we put top here to be 10 and save it, you see that it actually overflows
2:10
the elements below it, because relative position, when you apply top, left, right, and bottom
2:14
it actually takes that element out of the document flow and moves it down or left or
2:19
right or up those 10 pixels that you specified. And the reason that this element two and three are not actually being pushed down when this
2:26
top element is being pushed down is because, like I said, it was removed from the document
2:30
flow, so it no longer works just like a statically positioned element
2:35
You can see here that the position where one normally would be is taken up, and that is
2:40
reserved for where one is, and the actual element one is just moved by these top, left
2:45
right, and bottom elements that we applied to it. In general, you're almost never going to be using top, left, right, and bottom on a positioned
2:52
relative element, because all that does is move your element out of the document flow
2:56
and it becomes really difficult to style things around it, since as you can see, our element
2:59
two is now no longer in line with one, so we would have to also position the relative
3:04
number two exactly the same, and then we'd have to do the exact same thing with number three, and so on, and it gets really confusing when you start using that
3:11
So in general, position relative is not actually used for using top, left, right, and bottom
3:16
The next element that we want to talk about for position is absolute, and that one most
3:20
definitely gets used with top, left, right, and bottom. So let's put an absolute on here, remove our top, save everything, and you can see that
3:27
already things have changed drastically from before when we had no position
3:31
This is with no position, and then position absolute. And as you can see, the document actually completely ignores this one element right here
3:39
It just pretends like it was completely deleted. And for example, if we go into our index.html here, and we delete this one element and save
3:46
it, all of the rest of our elements work exactly the same as before. We add it back in, you see nothing else moves except for that one element, and that's because
3:53
position absolute completely removes the element from the document flow, and everything else
3:58
renders as if that absolute element didn't even exist at all, and that is crucially important
4:04
This makes position absolute really useful for when you want to stick something in a specific position, but you don't want anything else to move around it
4:10
And as I mentioned, position absolute allows you to do top, left, right, and bottom to
4:14
it, and you'll notice if we put a top on here of, let's just say 10 pixels, something really
4:18
weird is going to happen. If we save that, you see that this element is actually 10 pixels from the very top of
4:23
our screen. If we set this to zero and save, you can really see that it's just at the very top of the screen
4:29
But why is that? Wouldn't it be down here, zero pixels from itself
4:33
And that is incorrect because that's what relative position does. Absolute position absolutely positions an element inside of some parent container that
4:42
it can reference. So you would think it would reference this parent, but this parent is positioned static
4:47
which means it can't have anything else positioned absolutely or relatively to it
4:52
In order to change an element so that you can position something absolutely or relatively
4:56
to it, you need to use one of the other positioning elements of either relative, absolute, sticky
5:03
or fixed in order to make an element position absolutely inside of it
5:07
So if we change parent here to position relative, which this is the most common use case for
5:12
position relative, you'll see now our absolute position element is relative to the position
5:17
relative parent. And this is where relative is really useful. It's when you want to absolutely position something inside of it, you need to make sure
5:24
that element has positioned relative. Otherwise that element will just fall back to the next relatively positioned parent or
5:31
all the way back to the HTML element itself. So this is where relative and absolute play really nicely together
5:37
So just to reiterate the positions we've gone over already, static is the default
5:42
Relative is exactly the same as static, but you can relatively position it to itself using
5:46
top left, bottom and right. And then absolute is just like relative in the fact that you can position it relative
5:52
using top left, right and bottom. But it completely removes it from the document flow so that all the other elements ignore
5:58
it completely. And relative and absolute play together nicely because any element that is relatively positioned
6:04
can have absolutely positioned elements inside of it that'll be relative to that relative
6:09
position element. And that works for every position, not just relative. We could change this here to be absolute as well
6:15
And you can see still that one element is relative to the parent because the parent
6:20
has some other position than static. And that's really important. Anytime you have a position other than static, absolute element will use that as its parent
6:28
that it's absolutely positioned inside of. So let's remove that because we don't actually want this
6:32
We can keep it as relative. And now we can move on to the next type of positioning, which is fixed positioning, which
6:38
is very similar to absolute positioning, but there's some caveats regarding it
6:42
So let's change this to be position fixed here and save it
6:46
And you see immediately it completely ignores this relative position parent and moves all
6:50
the way to the top. And that's because fixed position elements are always fixed positioned based on the entire
6:56
HTML element. It has nothing to do with parents. Also something really unique about fixed position elements is they stay in the same place when
7:03
you scroll. So let's make our page very large. We're going to change the height here to 200 view height
7:09
So it'll be able to scroll. And if we save that, we can scroll down
7:12
You see that this one element still sticks to the very top of our page because it's got
7:16
top of zero. For example, if we put the right to zero as well and say that you can see it sticks now
7:21
to the top, right? No matter how far we scroll, but absolute does not work that way
7:26
If we change this to absolute, you can see it's in the top right here, but if we scroll
7:30
you can see it stays there. It doesn't actually move when you scroll. And that's the big difference between fixed and absolute fixed moves with the page as
7:37
you scroll and is always in the same exact position on the page
7:41
And also it positioned itself based on the entire HTML page and not just the parent that
7:46
has the correct positioning, relative, absolute, et cetera on it. And those are the real big differences between absolute and fixed
7:54
And now the last position that we need to cover is position sticky. And I'm not going to go super in depth in position sticky because I have an entire video
8:00
covering it. So if you want to check that out, make sure you check the description and the cards for
8:04
this video to find that sticky position video. But essentially sticky position is a combination of both relative position and fixed position
8:11
into one. So let's go down here to our child one. We're going to make this sticky position
8:16
We'll get rid of the right. We'll just have top here. And if we save that, you'll see, it looks just normal, just like it was relatively positioned
8:23
But as we scroll down, as soon as this element hits the top of our page, since we have our
8:28
top set to zero, it'll become fixed position now. And as you can see, as we scroll, it stays fixed to the top of our page with that top
8:34
of zero. And that's really the power of sticky position is by default it's relative, but as soon as
8:40
it scrolls outside of the page, it becomes fixed position. And that's it
8:45
Position in CSS is really that easy. You have the default static position
8:49
You have the relative position, which works just like static, but you can move it based on itself
8:53
Absolute, which works just like relative, but it's moved based on its parent element
8:57
that is using position relative, absolute, sticky, or fixed. And we also have sticky position, which works just like fixed and relative
9:04
And lastly, fixed position, which allows you to put an element on the page and it'll stay
9:08
there no matter where the user moves to with the scroll wheel
9:12
So I really hope you guys enjoyed this video and have a little bit more understanding of the different positions inside of CSS
9:17
If you enjoyed the video, make sure to subscribe and leave a comment down below letting me know what other videos you want me to make in the future
9:23
Thank you very much for watching and have a good day
#Programming
#Software
#Technical Reference