0
1
00:00:02,660 --> 00:00:03,350
Welcome back.
1

2
00:00:03,350 --> 00:00:08,180
In this video, we're going to take care of the arrows on our slider. In order to put them on the bottom
2

3
00:00:08,180 --> 00:00:11,180
right corner of our slider, like we have in the designs,
3

4
00:00:11,180 --> 00:00:13,020
we need to learn a new concept.
4

5
00:00:13,070 --> 00:00:15,320
This concept is called position.
5

6
00:00:15,320 --> 00:00:20,480
Position is a CSS style that gives us a tremendous amount of control on our objects.
6

7
00:00:20,480 --> 00:00:22,860
This style can be changed from here.
7

8
00:00:22,880 --> 00:00:27,740
We have 5 different position values: Static, Relative, Absolute, Fixed and Sticky.
8

9
00:00:27,750 --> 00:00:28,850
Let's go through each one.
9

10
00:00:32,030 --> 00:00:37,640
I've organized 5 cards here and one by one will apply to them different position settings, to see what
10

11
00:00:37,640 --> 00:00:38,670
happens to them.
11

12
00:00:38,810 --> 00:00:45,170
Static or also called Auto, is the default position of almost all objects. Elements that are static behave
12

13
00:00:45,170 --> 00:00:51,370
the way we already are familiar with it. Like a word document, flowing from one after the other.
13

14
00:00:54,290 --> 00:00:59,930
Things get a bit more interesting from relative. Relative object is positioned relative to itself.
14

15
00:00:59,930 --> 00:01:01,450
I know this says nothing to you.
15

16
00:01:01,520 --> 00:01:08,060
Let me demonstrate. I'm going to apply relative to this box and nothing happens, very uneventful. But one
16

17
00:01:08,060 --> 00:01:09,140
thing did happen.
17

18
00:01:09,140 --> 00:01:11,970
The position settings now have a few more controls.
18

19
00:01:12,020 --> 00:01:17,780
We get these similar controls like we have with spacing. We can adjust those values and the box is going
19

20
00:01:17,780 --> 00:01:18,320
to move.
20

21
00:01:21,730 --> 00:01:25,060
We're basically giving the box top margin of 100 pixels.
21

22
00:01:25,090 --> 00:01:30,430
It works in a quite similar way with one exception. And you'll see this exception, when I show you what
22

23
00:01:30,430 --> 00:01:34,120
happens when you edit margin instead of this relative positioning.
23

24
00:01:36,340 --> 00:01:39,230
You see, the margin has altered the flow of the page.
24

25
00:01:39,310 --> 00:01:44,740
The height of the parent container was increased because that margin needs to fit into that space. But
25

26
00:01:44,740 --> 00:01:48,990
when you use relative positioning, the flow of document is not touched at all.
26

27
00:01:53,790 --> 00:02:00,240
You can move the object anywhere you like, but in the flow of the document it's only going to occupy
27

28
00:02:00,240 --> 00:02:01,890
its original slot.
28

29
00:02:01,890 --> 00:02:03,630
This is a power of relative position.
29

30
00:02:03,630 --> 00:02:09,060
We have completely moved it out of its own place, but the cards that are nested inside a flexbox haven't
30

31
00:02:09,060 --> 00:02:10,270
moved at all.
31

32
00:02:10,290 --> 00:02:12,590
They act like the red card is still there.
32

33
00:02:15,240 --> 00:02:16,860
Now as for Absolute position.
33

34
00:02:20,180 --> 00:02:25,340
Absolutely position object is removed from the flow of the document. And it sits on a new layer.
34

35
00:02:25,340 --> 00:02:27,860
Sort of like objects inside Figma.
35

36
00:02:27,860 --> 00:02:30,240
In Figma all elements are sort of Absolutely position.
36

37
00:02:30,260 --> 00:02:35,720
They all exist on their own layer. Absolute positioning is often what we use when we need to overlap
37

38
00:02:35,750 --> 00:02:38,370
elements or put them on top of each other.
38

39
00:02:38,480 --> 00:02:41,660
Now an important setting for absolute positioning is here.
39

40
00:02:41,690 --> 00:02:46,010
It tells us what is this object positioned relative to.
40

41
00:02:46,010 --> 00:02:51,190
We have this same field for the relative element, but that one always says itself. Because that's what
41

42
00:02:51,200 --> 00:02:51,980
relative does.
42

43
00:02:51,980 --> 00:02:57,500
It's always positioned relative to itself and that can't be altered. But the absolute element can.
43

44
00:02:57,500 --> 00:03:00,490
It can be relative to any of its parent elements.
44

45
00:03:00,500 --> 00:03:05,900
In the beginning, you'll see that it's usually relative to the body element. Which means relative to the
45

46
00:03:05,900 --> 00:03:07,010
entire page.
46

47
00:03:07,010 --> 00:03:12,890
For example, if we set the left position value to 0. It's going to be positioned 0 pixels from the
47

48
00:03:12,890 --> 00:03:14,730
left edge of the body.
48

49
00:03:14,730 --> 00:03:19,740
Right now, it's not exactly on the edge, because this has a 15 pixel margin on the sides.
49

50
00:03:19,760 --> 00:03:26,500
If we give it 100 pixel left position, it's going to move 100 pixels from the edge. And if we give it
50

51
00:03:26,500 --> 00:03:32,080
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

52
00:03:32,080 --> 00:03:37,060
is going to look like the green box isn't really there. But if we check the navigator, we'll see that
52

53
00:03:37,060 --> 00:03:39,960
the Absolute box is still part of the container.
53

54
00:03:39,970 --> 00:03:43,480
As I said, Absolute element can be relative to any of its parents.
54

55
00:03:43,660 --> 00:03:48,380
If we choose to do so. Now to choose the parent, there is a little trick we have to do.
55

56
00:03:48,520 --> 00:03:52,300
We have to change the position of that parent to anything but Static.
56

57
00:03:52,300 --> 00:03:58,150
For example, if we want the green card to be positioned relative to the pink container, then we have to
57

58
00:03:58,150 --> 00:04:01,380
change the position of the container to something but Static.
58

59
00:04:01,480 --> 00:04:04,990
Usually, we change it to relative, because that's the easiest way.
59

60
00:04:05,020 --> 00:04:10,390
That doesn't alter the flow of document. The instant you change the parent elements position, the absolute
60

61
00:04:10,390 --> 00:04:15,400
position green box jumps back to the pink container and positions itself around that container.
61

62
00:04:15,400 --> 00:04:19,310
If you check the settings, now you'll see that it says "Relative to parent container".
62

63
00:04:19,330 --> 00:04:23,670
So since we have 0 pixels from top, it is position on the top left corner.
63

64
00:04:23,770 --> 00:04:28,300
And as we change this value, it will move relative to the parent container.
64

65
00:04:28,300 --> 00:04:34,030
Now if we instead wanted a green box to be positioned relative to some other parent container. For example,
65

66
00:04:34,060 --> 00:04:39,550
the grandparent container, we will need to change the position from static to something else on that grandparent
66

67
00:04:39,550 --> 00:04:40,120
container.
67

68
00:04:43,050 --> 00:04:49,260
But there is one important rule. It's going to position itself relative to the very first parent element
68

69
00:04:49,260 --> 00:04:51,320
that doesn't have a static position.
69

70
00:04:51,330 --> 00:04:55,740
So right now, nothing happened when we changed the position of the grandparent container, because that
70

71
00:04:55,740 --> 00:05:00,120
pink parent container, still has a non static position.
71

72
00:05:00,120 --> 00:05:03,630
So the green box will continue to be relative to that thing.
72

73
00:05:03,720 --> 00:05:08,100
And if we change the position of the parent containers to Static, then this will happen.
73

74
00:05:10,020 --> 00:05:16,420
Now, as it shows here, the green box is relative to the grandparent container. Webflow has some useful
74

75
00:05:16,420 --> 00:05:19,830
position presets, right here for an Absolute element.
75

76
00:05:19,840 --> 00:05:25,690
This is a very handy quick way to change the positions. Left top corner, right top corner, top full, bottom full
76

77
00:05:25,690 --> 00:05:26,980
and so on.
77

78
00:05:26,980 --> 00:05:29,860
You can see that as you change this values, below
78

79
00:05:29,860 --> 00:05:35,050
update with it. It's easier to align things visually like that, instead of needing to calculate on how
79

80
00:05:35,050 --> 00:05:40,330
many pixels should you put on all 4 sites.
80

81
00:05:40,410 --> 00:05:46,920
Up next is fixed position. Fixed elements are positioned relative to the viewport, meaning to the visible
81

82
00:05:46,920 --> 00:05:49,170
part of the page at any given point.
82

83
00:05:49,440 --> 00:05:52,590
If we choose one of the presets, it will be fixed accordingly.
83

84
00:05:52,620 --> 00:05:55,540
As you can see, the fixed element is exactly that - fixed.
84

85
00:05:55,560 --> 00:06:01,110
It's sort of like an absolute object. Yanked outside of the document flow, not affecting other elements
85

86
00:06:01,170 --> 00:06:02,620
sitting on a whole new layer.
86

87
00:06:02,640 --> 00:06:07,490
And unlike absolute object, it's fixed relative to the visible screen. No matter where you scroll it, it
87

88
00:06:07,500 --> 00:06:08,580
will remain fixed.
88

89
00:06:08,820 --> 00:06:11,740
This position is often used for navigation bars.
89

90
00:06:11,760 --> 00:06:13,700
You know, how many websites have navbar
90

91
00:06:13,700 --> 00:06:15,650
that is always fixed on top of the page
91

92
00:06:15,660 --> 00:06:20,840
as you scroll? That's using fixed position.
92

93
00:06:20,970 --> 00:06:24,240
Finally, we have Sticky position, which is a little tricky.
93

94
00:06:24,240 --> 00:06:29,690
What sticky does is that, it sort of acts as a fixed element. But only within its parent container.
94

95
00:06:29,730 --> 00:06:32,450
Easier to show than explain.
95

96
00:06:32,600 --> 00:06:34,300
So right now nothing happens.
96

97
00:06:34,310 --> 00:06:40,240
It just acts like a regular static element, because two conditions need to be met for it to work.
97

98
00:06:40,250 --> 00:06:41,860
First, parent needs to be tall enough,
98

99
00:06:41,870 --> 00:06:44,300
so there is space for it to scroll inside.
99

100
00:06:44,330 --> 00:06:45,890
Otherwise, there is no point.
100

101
00:06:45,890 --> 00:06:47,810
So let's make the container a bit taller.
101

102
00:06:54,420 --> 00:06:55,290
Second condition.
102

103
00:06:55,290 --> 00:06:58,560
We need to put some custom value, usually in the top position.
103

104
00:06:58,560 --> 00:07:00,420
For example, we can put 0
104

105
00:07:03,480 --> 00:07:05,550
and now you'll see that it works.
105

106
00:07:07,000 --> 00:07:12,380
What happens is, that it's fixed on the screen while we are scrolling through the parent container.
106

107
00:07:12,580 --> 00:07:17,170
Once the sticky element hits the bottom of the parent container, it doesn't scroll past it.
107

108
00:07:17,170 --> 00:07:21,280
What the top value does, is that it tells from what point to stick.
108

109
00:07:21,340 --> 00:07:26,290
In this case, it sticks the moment sticky element is 0 pixels from the viewport.
109

110
00:07:26,320 --> 00:07:29,080
If we put something like 30 pixels, then it's going to stick
110

111
00:07:29,080 --> 00:07:32,520
the moment it's 30 pixels from the top edge of the screen.
111

112
00:07:36,000 --> 00:07:41,200
For the things that scroll horizontally and need to stick horizontally, then instead of top position,
112

113
00:07:41,710 --> 00:07:44,500
we would use left or right position value.
113

114
00:07:44,500 --> 00:07:48,100
I'm not gonna demonstrate this one, because we wouldn't need that very very rarely.
114

115
00:07:48,550 --> 00:07:53,650
So these are all the positions. Static, which is the default for almost all elements and it flows naturally
115

116
00:07:53,650 --> 00:07:59,530
with a document. Relative, which is sort of like static, but it can be moved from its place without altering
116

117
00:07:59,530 --> 00:08:05,200
the document flow and moving any nearby elements. Absolute, which is the wild positioning of the group.
117

118
00:08:05,470 --> 00:08:10,930
It gets yanked out of the document flow and is positioned relative to the first parent that doesn't
118

119
00:08:10,930 --> 00:08:16,300
have a static position. Fixed, which is just like the absolute, but it's relative to the viewport. Getting
119

120
00:08:16,300 --> 00:08:17,980
fixed to the visible screen.
120

121
00:08:18,130 --> 00:08:24,760
Mainly used for navigation bars. And sticky, which is sort of like fixed but on steroids. Fixing only within
121

122
00:08:24,760 --> 00:08:26,810
the boundaries of its parent container.
122

123
00:08:26,840 --> 00:08:27,110
Alright.
123

124
00:08:27,130 --> 00:08:31,450
That's the general idea of positioning. In the next video, we'll take this knowledge and apply it to the
124

125
00:08:31,450 --> 00:08:33,880
arrows on our testimonial slider.
125

126
00:08:33,940 --> 00:08:34,470
Stick around.