1
00:00:08,540 --> 00:00:09,340
All right.

2
00:00:09,360 --> 00:00:10,440
Welcome back.

3
00:00:10,460 --> 00:00:14,570
In this video, let's talk about fixed positioning.

4
00:00:14,600 --> 00:00:15,650
What is it?

5
00:00:15,680 --> 00:00:16,360
Great.

6
00:00:16,370 --> 00:00:17,240
Let's see.

7
00:00:18,320 --> 00:00:25,250
Fixed position in behave as the absolute positioning but with one difference.

8
00:00:25,250 --> 00:00:35,240
So let's see for this type of positioning, it position itself relative to the viewport or the browser

9
00:00:35,240 --> 00:00:36,890
window itself.

10
00:00:36,920 --> 00:00:44,000
So it doesn't take into consideration whether a parent has a position called relative or not.

11
00:00:44,030 --> 00:00:48,980
It is always take or look up to the viewport.

12
00:00:49,130 --> 00:00:57,170
The next point is that always the parent is a browser window or the viewport, as I said.

13
00:00:57,320 --> 00:01:06,890
And lastly, regardless of how far or down the page you scroll, the element will always stay in the

14
00:01:06,890 --> 00:01:11,420
same spot as we see in the final project.

15
00:01:11,420 --> 00:01:14,990
And I use a position called Fix for this.

16
00:01:14,990 --> 00:01:20,690
When I scroll, whatever I do, it doesn't take, it doesn't behave, it doesn't shake, it doesn't

17
00:01:20,690 --> 00:01:21,190
move.

18
00:01:21,200 --> 00:01:23,800
So I call this one as inanimate.

19
00:01:24,290 --> 00:01:25,790
That's non living thing.

20
00:01:25,820 --> 00:01:26,390
Good.

21
00:01:26,390 --> 00:01:29,690
So let's see how we are going to implement that.

22
00:01:29,690 --> 00:01:36,740
And you are going to continue from where we left because for this one is pretty easy to implement for

23
00:01:36,740 --> 00:01:37,610
fixed positioning.

24
00:01:37,610 --> 00:01:39,290
So let's get going.

25
00:01:39,290 --> 00:01:43,520
So I'm going to add a different div inside this.

26
00:01:43,730 --> 00:01:51,770
So let's add a dev with a class, say child three and let's see.

27
00:01:51,770 --> 00:02:00,650
So let me come back to the CSS and copy one of these and then down here paste it and change this 1 to

28
00:02:00,650 --> 00:02:01,160
3.

29
00:02:01,310 --> 00:02:04,670
And let me remove the position here when I save it.

30
00:02:04,670 --> 00:02:11,690
Let me change this one to purple color and let's see in the browser and here we go.

31
00:02:11,900 --> 00:02:19,400
As soon as I add position called fix, now have it look fixed.

32
00:02:20,660 --> 00:02:28,100
I could see automatically at his position down here because I have these properties, let me remove

33
00:02:28,100 --> 00:02:29,960
the bottom left and right.

34
00:02:29,960 --> 00:02:37,700
So as soon as I add the position fixed, I have these properties as before that is left, bottom, right

35
00:02:37,700 --> 00:02:38,410
and top.

36
00:02:38,420 --> 00:02:41,990
If I do that, you can see that where it is great.

37
00:02:41,990 --> 00:02:53,270
But if I add top to zero and if you see where it position itself, when I say bottom zero, you can

38
00:02:53,270 --> 00:02:55,310
see how it is position itself.

39
00:02:55,310 --> 00:03:02,270
When I say left or right, zero to now see we see where it is.

40
00:03:02,270 --> 00:03:06,680
That is the behaviour of fixed position in the next video.

41
00:03:06,680 --> 00:03:09,680
Let's get started with our final project.