1
00:00:07,160 --> 00:00:08,360
In this video.

2
00:00:08,390 --> 00:00:14,000
Let's talk about absolute positioning before we get into code.

3
00:00:14,000 --> 00:00:17,960
Let's look at the properties of Absolut positioning.

4
00:00:19,020 --> 00:00:27,540
The first point is that element will be positioned relative to its closest parent, which has position

5
00:00:27,540 --> 00:00:29,160
core relative.

6
00:00:29,250 --> 00:00:30,690
What does this mean?

7
00:00:30,960 --> 00:00:39,870
It simply means that if you add a position called absolute to an element, it is always going to look

8
00:00:39,870 --> 00:00:44,880
at it closer to parent, which has a position called relative.

9
00:00:44,910 --> 00:00:49,610
Then it's going to position relative to that particular element.

10
00:00:49,620 --> 00:00:57,240
The differences between absolute and then the relative is that for relative, it doesn't look up to

11
00:00:57,240 --> 00:01:01,920
any parent before a composition itself relative to it.

12
00:01:02,040 --> 00:01:10,960
But for absolute, it always looks up to a parent which has position being set relative, then going

13
00:01:10,960 --> 00:01:14,310
to position relative to that particular parent.

14
00:01:14,310 --> 00:01:16,380
And I'll show you with code.

15
00:01:16,410 --> 00:01:24,780
The next point is that element will be removed from the document flow, meaning that the remaining element

16
00:01:24,780 --> 00:01:31,140
will behave as if there is no element that is the opposite to the relative position.

17
00:01:31,140 --> 00:01:39,180
And I would move for you to the next one is that it can be moved horizontally or vertically using the

18
00:01:39,180 --> 00:01:41,910
left right, top bottom properties.

19
00:01:41,910 --> 00:01:50,520
And this one the same as the relative position in the next one is that the offset values for these properties

20
00:01:50,520 --> 00:01:57,660
can be either positive or negative, which determines whether the element will be moved closer or far

21
00:01:57,660 --> 00:02:00,180
away from the normal positioning.

22
00:02:00,180 --> 00:02:04,650
And this one is also same as a relative position.

23
00:02:04,650 --> 00:02:08,669
Let's get to a Visual City code and put into practice.

24
00:02:08,669 --> 00:02:17,490
Well, this is where we left and I have made a copy and paste and rename the previous one to relative

25
00:02:17,520 --> 00:02:26,880
as that and we are going to work on the index and this one we have as before and inside the CSS for

26
00:02:26,880 --> 00:02:33,420
this one, I have removed all the properties with the exception of background height and weight for

27
00:02:33,420 --> 00:02:34,530
each child.

28
00:02:34,530 --> 00:02:36,900
So let's see how we are going to work.

29
00:02:36,900 --> 00:02:43,320
And then let's look at the index to, as I showed you, is the same as before and I've changed the name

30
00:02:43,320 --> 00:02:44,340
to absolute.

31
00:02:44,340 --> 00:02:54,420
Now this is what we have next is let's go ahead and add property code position to the green one.

32
00:02:54,450 --> 00:03:03,330
Now when I make this of position which is absolute now when I save it, have a look, it could see that

33
00:03:03,330 --> 00:03:09,270
it has moved from the document flow and then the other element behave.

34
00:03:09,270 --> 00:03:10,500
There is no element.

35
00:03:10,500 --> 00:03:16,470
That is why the parent has been reduced to contain eight children.

36
00:03:16,470 --> 00:03:25,650
So it means that this parent does not know the child of green because it has taken from it document

37
00:03:25,650 --> 00:03:26,340
flow.

38
00:03:26,370 --> 00:03:29,490
That is a point that we raised here.

39
00:03:29,520 --> 00:03:37,320
That element will be removed from the document, meaning that the remaining element will behave as if

40
00:03:37,320 --> 00:03:38,730
there is no element.

41
00:03:38,730 --> 00:03:42,750
So the parent is behaving, there is no elements.

42
00:03:42,750 --> 00:03:48,180
But the cool thing is that I can control how I can position this one.

43
00:03:48,180 --> 00:03:51,900
I can put it here or here or here or here.

44
00:03:51,900 --> 00:03:57,630
So now we also have access to the top left, bottom right property.

45
00:03:57,660 --> 00:04:01,530
If I sit top, look at the strange thing here.

46
00:04:01,530 --> 00:04:05,910
When I save it or look at it, you see where it is positioning.

47
00:04:05,940 --> 00:04:10,350
It is positioning to the top of the window.

48
00:04:10,530 --> 00:04:12,540
Let's get to point number one.

49
00:04:12,540 --> 00:04:21,209
It says that element will be positioned relative to its closest parent, which has position core relative.

50
00:04:21,420 --> 00:04:28,170
So it may be thinking that there is no element with position or relative.

51
00:04:28,200 --> 00:04:31,170
So how is this one able to do that?

52
00:04:31,320 --> 00:04:32,940
Well, here is a clue.

53
00:04:33,270 --> 00:04:42,030
If there is no element with the position called relative, it is going to look up to the parent, which

54
00:04:42,030 --> 00:04:44,670
is the viewport, the HTML.

55
00:04:44,700 --> 00:04:51,240
So if I add a position to the body, let me show you something here.

56
00:04:51,510 --> 00:04:58,170
When I say position called relative, you can see that it is position to the top of the parent.

57
00:04:58,170 --> 00:05:04,200
And this is a parent here because we didn't specify or reset the default.

58
00:05:04,200 --> 00:05:07,050
That's why we see this empty canvas here.

59
00:05:07,140 --> 00:05:15,080
So if you want to reset the default behavior without having a margin, as we discussed before, you

60
00:05:15,090 --> 00:05:18,180
are going to be margin zero and then padding.

61
00:05:18,410 --> 00:05:19,000
Zero.

62
00:05:19,010 --> 00:05:22,640
And let's see where it's going to position itself now.

63
00:05:22,670 --> 00:05:24,230
This is the body.

64
00:05:24,260 --> 00:05:27,470
That is where it is positioned itself, too.

65
00:05:27,650 --> 00:05:32,570
So with this one, I can move this one to the right.

66
00:05:32,690 --> 00:05:41,770
So when I say on the child green, which has position called absolute, I can say right also zero.

67
00:05:41,780 --> 00:05:50,300
And you can see where it has positioned itself to many top here is zero and then right here is zero.

68
00:05:50,600 --> 00:06:00,020
But in most cases you want this array or element to be positioned in a certain container, as I did

69
00:06:00,020 --> 00:06:01,700
in the final project.

70
00:06:01,940 --> 00:06:11,210
You can see that for this one I have positioned this particular element at the top here of this particular

71
00:06:11,210 --> 00:06:11,990
container.

72
00:06:11,990 --> 00:06:14,510
So how are you going to achieve that?

73
00:06:14,600 --> 00:06:22,190
That's why we say that if we add a position called absolute, it is going to look up to its nearest

74
00:06:22,190 --> 00:06:25,420
parent, which has a position called relative.

75
00:06:25,430 --> 00:06:33,590
And looking into our code, there is no element that we have specified that issue position itself to.

76
00:06:33,740 --> 00:06:40,330
So if we want to position, we need to give the parent a position called relative.

77
00:06:40,340 --> 00:06:46,420
So now if I come to the container, then I give it position called relative.

78
00:06:46,430 --> 00:06:50,030
Now let's save it and let's see, let's come back here.

79
00:06:50,030 --> 00:06:53,150
And now you can see where it is pushing itself to.

80
00:06:53,180 --> 00:07:01,520
Now, it didn't look up to the parent or the body because the nearest parent, which is a container,

81
00:07:01,550 --> 00:07:03,830
has a position called relative.

82
00:07:03,860 --> 00:07:06,350
That is why it has positioned itself here.

83
00:07:06,560 --> 00:07:10,190
And we can reduce the size of the green.

84
00:07:10,190 --> 00:07:18,110
Let's say the the height is the weight is 50 and then the height is also 50.

85
00:07:18,590 --> 00:07:23,720
Now I can see how it's being positioned and I use that technique to achieve this.

86
00:07:23,870 --> 00:07:30,610
And if want to put this one, let's see at the bottom here, let's see how we're going to achieve that.

87
00:07:30,620 --> 00:07:37,180
So this time around it is not top zero, but instead it's going to be bottom zero.

88
00:07:37,190 --> 00:07:44,360
So here we can make it as pixels by and the value as it is, same as I did before.

89
00:07:44,360 --> 00:07:49,820
So if I change this one to bottom to be zero, I'll start now.

90
00:07:49,820 --> 00:07:57,230
Let's see if we see how it is position itself and if I want to be this side, what would be the value?

91
00:07:57,680 --> 00:08:05,870
Well, it's going to be left here zero and bottom zero, and that way it would be this side.

92
00:08:05,870 --> 00:08:12,050
So when I say here as left now you can see where it is positioned.

93
00:08:12,050 --> 00:08:19,670
And if you want to move this one away from this side, then we are going to increase from zero to,

94
00:08:19,670 --> 00:08:21,200
say, 56.

95
00:08:21,230 --> 00:08:26,830
And you can see how I'm positioning the last position properly is going to be a fixed position.

96
00:08:26,930 --> 00:08:33,740
Let's talk about it then this video and then we start with our project and put into practice all these

97
00:08:33,740 --> 00:08:34,460
concepts.