1
00:00:07,000 --> 00:00:08,260
In this video.

2
00:00:08,260 --> 00:00:13,780
Let's talk about types of cases, positioning properties.

3
00:00:14,110 --> 00:00:20,600
The first one is what we call static positioning, and this is by default.

4
00:00:20,620 --> 00:00:24,610
Every element has this type of positioning.

5
00:00:24,700 --> 00:00:31,990
And then the next one is what we call the relative positioning, absolute positioning.

6
00:00:31,990 --> 00:00:36,490
And lastly, we will talk about fixed positioning.

7
00:00:36,520 --> 00:00:41,910
So in this video, let's talk about relative positioning.

8
00:00:41,920 --> 00:00:47,860
Before we get into code, let's look at the properties of relative positioning.

9
00:00:47,980 --> 00:00:56,890
The first one is that it is positioned relative to itself, meaning to its original positioning, and

10
00:00:56,890 --> 00:00:58,690
I will show you with code.

11
00:00:58,900 --> 00:01:08,320
The next point is that it position element can be moved horizontally or vertically using the left,

12
00:01:08,500 --> 00:01:12,310
right, top and bottom properties.

13
00:01:12,310 --> 00:01:20,020
So for that particular element that has a position called relative, we can move that element to the

14
00:01:20,020 --> 00:01:24,190
top, bottom, right or left.

15
00:01:24,220 --> 00:01:27,790
That is how relative positioning works.

16
00:01:28,000 --> 00:01:38,260
The next point is that the offset values for these properties can be either positive or negative, which

17
00:01:38,260 --> 00:01:46,840
determines whether the element will be moved closer or far away from its normal positioning.

18
00:01:46,870 --> 00:01:54,360
Which means that if we use negative value, it is what, moving closer to the element.

19
00:01:54,370 --> 00:01:59,290
But when you use positive, it is moving away from the element.

20
00:01:59,290 --> 00:02:01,900
And I will show you as we move on.

21
00:02:02,170 --> 00:02:12,090
The next point is that relative position does not remove an element from the normal flow of the document.

22
00:02:12,100 --> 00:02:21,520
So any element that we use position, relative other elements behave that it is still the but behind

23
00:02:21,520 --> 00:02:22,890
the scene it is not.

24
00:02:22,900 --> 00:02:30,820
So it doesn't remove the element from the document flow or normal flow and I will show that I want you

25
00:02:30,820 --> 00:02:31,630
also.

26
00:02:31,960 --> 00:02:42,400
The next point is that the position elements can be layered on top of other elements or it can be placed

27
00:02:42,400 --> 00:02:46,750
behind them using what is called Z index.

28
00:02:46,750 --> 00:02:50,590
And I will explain to you what is Z index?

29
00:02:50,740 --> 00:02:58,000
The cool thing about this kind of position is that we can position these elements on top of any elements.

30
00:02:58,000 --> 00:02:59,980
So let's say that this is the page.

31
00:02:59,980 --> 00:03:09,580
I can position it here or here or here or here, and also I can put it on top of each other like stock,

32
00:03:09,580 --> 00:03:16,240
and I can decide that for the blue one it should go behind the other element and we can achieve that

33
00:03:16,240 --> 00:03:19,220
using what is called the Z index.

34
00:03:19,240 --> 00:03:27,640
The next point is that it positioned element is always determined with respect to it containing block,

35
00:03:27,820 --> 00:03:34,810
even if that containing block element is also relatively positioned well enough talking.

36
00:03:34,840 --> 00:03:41,500
Let's get back to visual, see the code and see how this properties comes into play.

37
00:03:41,500 --> 00:03:43,600
So here we go.

38
00:03:43,690 --> 00:03:47,710
As always, I have fresh HTML weights.

39
00:03:47,740 --> 00:03:49,240
Mtc's.

40
00:03:49,240 --> 00:03:54,040
So let me link up my CSS to the HTML.

41
00:03:54,040 --> 00:03:57,940
So here we go before my title.

42
00:03:57,970 --> 00:04:01,600
Let me bring in my link and one dot slash.

43
00:04:01,600 --> 00:04:06,640
I have my CSS, so let's have some structure.

44
00:04:06,670 --> 00:04:13,330
Let's say that we have a dev with a container attributes as that with a class.

45
00:04:13,450 --> 00:04:23,380
And next is inside this dev we are going to have two children inside this dev and dev number one, I'll

46
00:04:23,380 --> 00:04:29,890
call this one as child one and then nothing inside for now.

47
00:04:29,890 --> 00:04:34,650
And then I'll copy this one and then paste it here when I be asked.

48
00:04:34,660 --> 00:04:40,240
Child two Now let's have a look before I save it.

49
00:04:40,270 --> 00:04:49,900
Let's comment this one out and let's had one dev and give it a class core child.

50
00:04:50,080 --> 00:04:52,540
I will come back to this very soon.

51
00:04:52,540 --> 00:04:54,310
Now let's save it.

52
00:04:54,490 --> 00:05:00,130
So let me right click and open inside my browser and this is the page.

53
00:05:00,280 --> 00:05:05,950
Okay, so let's get to the CSS and play around the relative positioning.

54
00:05:05,950 --> 00:05:06,250
So.

55
00:05:06,360 --> 00:05:12,930
Now for the thesis, I want to add a position to this particular element.

56
00:05:12,960 --> 00:05:18,440
Before that, let's add some styling to that one to see how it's going to behave.

57
00:05:18,450 --> 00:05:29,760
So let's give it a background color of, say, red and give it a height of, say, 200 pixels, and

58
00:05:29,760 --> 00:05:33,630
then width also adds 200 pages.

59
00:05:33,630 --> 00:05:38,280
So if you save it, this is what we have I think is too much.

60
00:05:38,280 --> 00:05:46,320
Let's make it as 150 pixels by 150 pixels and let's see 150, 150.

61
00:05:46,860 --> 00:05:47,400
Good.

62
00:05:47,400 --> 00:05:57,480
So for each element we have CSS property composition and for this one we have these types of positioning.

63
00:05:57,480 --> 00:06:00,600
And the first one is what we call static.

64
00:06:00,600 --> 00:06:04,320
And this is by default every element has.

65
00:06:04,320 --> 00:06:08,430
If I started, I could see that nothing changes.

66
00:06:08,430 --> 00:06:17,880
But if I change this one to say relative, the one that we are talking about now, also nothing changes.

67
00:06:18,120 --> 00:06:26,880
But the cool thing is that as soon as I added the position called relative, I have additional control

68
00:06:26,910 --> 00:06:32,940
how I can move this particular element to the top, bottom, left or right.

69
00:06:32,940 --> 00:06:36,660
So here we have a property called top.

70
00:06:36,690 --> 00:06:39,720
As that is, I give it a zero pixels.

71
00:06:39,750 --> 00:06:47,340
What I mean is that at the top here is supposed to be what zero spaces where it is this where it is

72
00:06:47,340 --> 00:06:48,660
originally, right?

73
00:06:48,660 --> 00:06:52,230
So it's being positioned relative to itself.

74
00:06:52,650 --> 00:07:00,270
So let's say that I want to move this particular element from its original positioning.

75
00:07:00,420 --> 00:07:02,280
How am I going to do it?

76
00:07:02,280 --> 00:07:08,580
And we are going to use the properties called top bottom, right and left.

77
00:07:08,580 --> 00:07:16,680
So if I want to move this particular element to this side, I'm going to add a property called left

78
00:07:16,680 --> 00:07:17,250
here.

79
00:07:17,250 --> 00:07:24,510
So here we have a property called left and how many distance you want to move it?

80
00:07:24,510 --> 00:07:28,860
So let's say I want to move it 200 parsecs from left.

81
00:07:29,930 --> 00:07:36,230
You could see that originally it was here, but I'm able to move it to this side.

82
00:07:36,260 --> 00:07:44,510
If I want to move it far away to the side, I need to increase the value for this, let's say 900.

83
00:07:44,550 --> 00:07:46,700
You can see how it is moving.

84
00:07:46,820 --> 00:07:52,100
So originally it was here and see how it is moving from it.

85
00:07:52,100 --> 00:07:59,570
Normal positioning and you talk about the offset, meaning this value can be negative.

86
00:07:59,630 --> 00:08:06,410
You see, when I provide that positive, it is worth moving toward the element.

87
00:08:06,410 --> 00:08:13,670
But when I provide, let's say negative, what I mean is that I want to move this particular element

88
00:08:13,670 --> 00:08:14,660
to this side.

89
00:08:14,660 --> 00:08:16,630
Negative, meaning offset.

90
00:08:16,640 --> 00:08:22,910
So if I change this one to, let's say -100.

91
00:08:23,780 --> 00:08:28,650
That is the behavior of the relative positioning.

92
00:08:28,670 --> 00:08:37,280
So let's bring back these elements in the mix by explaining to you that the relative position does not

93
00:08:37,280 --> 00:08:40,070
take the elements from a document flow.

94
00:08:40,100 --> 00:08:46,030
Now, if I save it, nothing seems to be happening because there is no styling on these elements.

95
00:08:46,040 --> 00:08:53,540
So let's say for the child, one, I want to have this and let me move the left here and the top and

96
00:08:53,540 --> 00:08:56,270
all the properties and let me copy this one.

97
00:08:56,270 --> 00:09:00,080
For child two and for child two.

98
00:09:00,080 --> 00:09:03,110
I want to change the color to green.

99
00:09:03,950 --> 00:09:13,880
Now we have these two elements and for the container that is the parent, I want to give it some border

100
00:09:13,880 --> 00:09:15,860
around the parent.

101
00:09:15,920 --> 00:09:16,790
So let's see.

102
00:09:16,790 --> 00:09:24,710
I want to give it a border as one or three pieces solid black.

103
00:09:27,240 --> 00:09:28,520
Now let's see.

104
00:09:28,530 --> 00:09:32,280
You can see how it is moving because there is a block level element.

105
00:09:32,310 --> 00:09:36,510
It is taking the available space as much as it can.

106
00:09:36,510 --> 00:09:38,820
And I can control the weight.

107
00:09:38,850 --> 00:09:42,060
Let's say I want to give it as 500 pieces.

108
00:09:42,240 --> 00:09:45,030
Now this one is okay.

109
00:09:45,510 --> 00:09:53,960
Next point is that let's apply positioning relative to each of these child.

110
00:09:53,970 --> 00:10:00,450
So let's say that for child two, I want to give it position called relative.

111
00:10:00,750 --> 00:10:02,520
And that's a great one.

112
00:10:02,550 --> 00:10:09,480
If I give it left, let's say left side, I want to give it as.

113
00:10:10,880 --> 00:10:13,400
$200 as before.

114
00:10:13,430 --> 00:10:18,830
You could see how it is moving and these elements are not adjusting.

115
00:10:18,950 --> 00:10:24,200
It means that this element behave that there is element here.

116
00:10:24,230 --> 00:10:31,340
That's why we say that this positioning does not take the element away from the document flow.

117
00:10:31,370 --> 00:10:33,500
It assumed that it is dead.

118
00:10:33,650 --> 00:10:39,750
So I can position this red one also away from the parent.

119
00:10:39,770 --> 00:10:48,140
So for the child one, I can add top of say $0 from the top.

120
00:10:48,170 --> 00:10:49,070
Now what?

121
00:10:49,070 --> 00:10:54,570
I mean, nothing changed because on top here, $0, that's what we have.

122
00:10:54,590 --> 00:11:01,310
But if I want to move it away from the parent, I'm going to give it a negative value.

123
00:11:01,340 --> 00:11:03,610
So here we go.

124
00:11:03,620 --> 00:11:06,860
Let's say negative ten P6.

125
00:11:07,220 --> 00:11:07,600
Okay.

126
00:11:07,610 --> 00:11:09,710
I think that one is not that much.

127
00:11:09,740 --> 00:11:16,160
If I give it of, say, 60, well, nothing seems to be happening.

128
00:11:16,190 --> 00:11:20,480
The problem is that there is no position called relative.

129
00:11:20,510 --> 00:11:21,990
That is the problem.

130
00:11:22,010 --> 00:11:29,450
If I save it, you can see how it is moving away from the parent or from its normal positioning.

131
00:11:29,600 --> 00:11:34,980
So let me bring it back to, let's say $20.

132
00:11:35,000 --> 00:11:36,260
This is cool.

133
00:11:36,380 --> 00:11:41,030
And if I want to move this one to the same position.

134
00:11:41,210 --> 00:11:42,460
Now let's see.

135
00:11:42,470 --> 00:11:53,960
So for this one, I want to remove the left and say I want to go to the top of the same as -$20.

136
00:11:53,960 --> 00:11:55,040
So let's save it.

137
00:11:55,040 --> 00:11:59,180
And you can see that it has moving $20 to the top.

138
00:11:59,600 --> 00:12:01,610
It's going to be on top of each other.

139
00:12:01,610 --> 00:12:08,120
So if I increase this one to say 50, you can see how it is moving.

140
00:12:08,150 --> 00:12:13,460
Now we have the green on top of the red.

141
00:12:13,700 --> 00:12:20,310
And if you want the red to be on top of each other, we can use what is called Z index.

142
00:12:20,330 --> 00:12:25,450
Well, let's say that I want to have some space around here on the green.

143
00:12:25,460 --> 00:12:38,390
I'm going to add left with value, say 146 and if we see that now, it's clear that we have the green

144
00:12:38,390 --> 00:12:39,860
on top of the red.

145
00:12:40,080 --> 00:12:42,100
I think is too far away.

146
00:12:42,110 --> 00:12:44,000
What about 100?

147
00:12:44,090 --> 00:12:44,840
Yes.

148
00:12:44,840 --> 00:12:49,580
And let me increase the top one to say 86.

149
00:12:49,670 --> 00:12:53,150
And you see how we can achieve this effect.

150
00:12:53,270 --> 00:12:58,480
If I want this one to be on top of each other, we are going to use the index.

151
00:12:58,490 --> 00:13:00,910
So what is the index?

152
00:13:00,920 --> 00:13:06,430
Well, it controls the stock in order of an element.

153
00:13:06,440 --> 00:13:11,140
The higher the number it would be on top of the other.

154
00:13:11,150 --> 00:13:14,130
Now we have green on top of the red.

155
00:13:14,150 --> 00:13:22,340
If I want to move the green below the red, I'm going to give this one Z index of, say, one, and

156
00:13:22,340 --> 00:13:24,740
then the red of say two.

157
00:13:24,890 --> 00:13:36,770
So let me add the index to the red one, say two, and then for the Z index for the green, let me see

158
00:13:36,770 --> 00:13:37,460
one.

159
00:13:38,000 --> 00:13:39,710
Now you can see the order.

160
00:13:39,710 --> 00:13:48,290
I have changed the order using the Z index property and we can use this property to lay out elements

161
00:13:48,290 --> 00:13:52,650
to be on top of each other as we have done here.

162
00:13:52,670 --> 00:13:57,020
So this is the behavior of relative positioning.

163
00:13:57,060 --> 00:14:01,970
The next video, let's talk about the absolute positioning.