Welcome back. 1
In this video, we're going to take care of the arrows on our slider. In order to put them on the bottom 2
right corner of our slider, like we have in the designs, 3
we need to learn a new concept. 4
This concept is called position. 5
Position is a CSS style that gives us a tremendous amount of control on our objects. 6
This style can be changed from here. 7
We have 5 different position values: Static, Relative, Absolute, Fixed and Sticky. 8
Let's go through each one. 9
I've organized 5 cards here and one by one will apply to them different position settings, to see what 10
happens to them. 11
Static or also called Auto, is the default position of almost all objects. Elements that are static behave 12
the way we already are familiar with it. Like a word document, flowing from one after the other. 13
Things get a bit more interesting from relative. Relative object is positioned relative to itself. 14
I know this says nothing to you. 15
Let me demonstrate. I'm going to apply relative to this box and nothing happens, very uneventful. But one 16
thing did happen. 17
The position settings now have a few more controls. 18
We get these similar controls like we have with spacing. We can adjust those values and the box is going 19
to move. 20
We're basically giving the box top margin of 100 pixels. 21
It works in a quite similar way with one exception. And you'll see this exception, when I show you what 22
happens when you edit margin instead of this relative positioning. 23
You see, the margin has altered the flow of the page. 24
The height of the parent container was increased because that margin needs to fit into that space. But 25
when you use relative positioning, the flow of document is not touched at all. 26
You can move the object anywhere you like, but in the flow of the document it's only going to occupy 27
its original slot. 28
This is a power of relative position. 29
We have completely moved it out of its own place, but the cards that are nested inside a flexbox haven't 30
moved at all. 31
They act like the red card is still there. 32
Now as for Absolute position. 33
Absolutely position object is removed from the flow of the document. And it sits on a new layer. 34
Sort of like objects inside Figma. 35
In Figma all elements are sort of Absolutely position. 36
They all exist on their own layer. Absolute positioning is often what we use when we need to overlap 37
elements or put them on top of each other. 38
Now an important setting for absolute positioning is here. 39
It tells us what is this object positioned relative to. 40
We have this same field for the relative element, but that one always says itself. Because that's what 41
relative does. 42
It's always positioned relative to itself and that can't be altered. But the absolute element can. 43
It can be relative to any of its parent elements. 44
In the beginning, you'll see that it's usually relative to the body element. Which means relative to the 45
entire page. 46
For example, if we set the left position value to 0. It's going to be positioned 0 pixels from the 47
left edge of the body. 48
Right now, it's not exactly on the edge, because this has a 15 pixel margin on the sides. 49
If we give it 100 pixel left position, it's going to move 100 pixels from the edge. And if we give it 50
a 0 pixel top margin, then it's going to move all the way to the top of the page. And that pink container 51
is going to look like the green box isn't really there. But if we check the navigator, we'll see that 52
the Absolute box is still part of the container. 53
As I said, Absolute element can be relative to any of its parents. 54
If we choose to do so. Now to choose the parent, there is a little trick we have to do. 55
We have to change the position of that parent to anything but Static. 56
For example, if we want the green card to be positioned relative to the pink container, then we have to 57
change the position of the container to something but Static. 58
Usually, we change it to relative, because that's the easiest way. 59
That doesn't alter the flow of document. The instant you change the parent elements position, the absolute 60
position green box jumps back to the pink container and positions itself around that container. 61
If you check the settings, now you'll see that it says "Relative to parent container". 62
So since we have 0 pixels from top, it is position on the top left corner. 63
And as we change this value, it will move relative to the parent container. 64
Now if we instead wanted a green box to be positioned relative to some other parent container. For example, 65
the grandparent container, we will need to change the position from static to something else on that grandparent 66
container. 67
But there is one important rule. It's going to position itself relative to the very first parent element 68
that doesn't have a static position. 69
So right now, nothing happened when we changed the position of the grandparent container, because that 70
pink parent container, still has a non static position. 71
So the green box will continue to be relative to that thing. 72
And if we change the position of the parent containers to Static, then this will happen. 73
Now, as it shows here, the green box is relative to the grandparent container. Webflow has some useful 74
position presets, right here for an Absolute element. 75
This is a very handy quick way to change the positions. Left top corner, right top corner, top full, bottom full 76
and so on. 77
You can see that as you change this values, below 78
update with it. It's easier to align things visually like that, instead of needing to calculate on how 79
many pixels should you put on all 4 sites. 80
Up next is fixed position. Fixed elements are positioned relative to the viewport, meaning to the visible 81
part of the page at any given point. 82
If we choose one of the presets, it will be fixed accordingly. 83
As you can see, the fixed element is exactly that - fixed. 84
It's sort of like an absolute object. Yanked outside of the document flow, not affecting other elements 85
sitting on a whole new layer. 86
And unlike absolute object, it's fixed relative to the visible screen. No matter where you scroll it, it 87
will remain fixed. 88
This position is often used for navigation bars. 89
You know, how many websites have navbar 90
that is always fixed on top of the page 91
as you scroll? That's using fixed position. 92
Finally, we have Sticky position, which is a little tricky. 93
What sticky does is that, it sort of acts as a fixed element. But only within its parent container. 94
Easier to show than explain. 95
So right now nothing happens. 96
It just acts like a regular static element, because two conditions need to be met for it to work. 97
First, parent needs to be tall enough, 98
so there is space for it to scroll inside. 99
Otherwise, there is no point. 100
So let's make the container a bit taller. 101
Second condition. 102
We need to put some custom value, usually in the top position. 103
For example, we can put 0 104
and now you'll see that it works. 105
What happens is, that it's fixed on the screen while we are scrolling through the parent container. 106
Once the sticky element hits the bottom of the parent container, it doesn't scroll past it. 107
What the top value does, is that it tells from what point to stick. 108
In this case, it sticks the moment sticky element is 0 pixels from the viewport. 109
If we put something like 30 pixels, then it's going to stick 110
the moment it's 30 pixels from the top edge of the screen. 111
For the things that scroll horizontally and need to stick horizontally, then instead of top position, 112
we would use left or right position value. 113
I'm not gonna demonstrate this one, because we wouldn't need that very very rarely. 114
So these are all the positions. Static, which is the default for almost all elements and it flows naturally 115
with a document. Relative, which is sort of like static, but it can be moved from its place without altering 116
the document flow and moving any nearby elements. Absolute, which is the wild positioning of the group. 117
It gets yanked out of the document flow and is positioned relative to the first parent that doesn't 118
have a static position. Fixed, which is just like the absolute, but it's relative to the viewport. Getting 119
fixed to the visible screen. 120
Mainly used for navigation bars. And sticky, which is sort of like fixed but on steroids. Fixing only within 121
the boundaries of its parent container. 122
Alright. 123
That's the general idea of positioning. In the next video, we'll take this knowledge and apply it to the 124
arrows on our testimonial slider. 125
Stick around.