1
00:00:00,000 --> 00:00:12,030
the position property specifies our ailment is position it in a document using top right

2
00:00:12,030 --> 00:00:17,880
button and left properties to shift the element to the final location.

3
00:00:17,880 --> 00:00:25,500
This property can assume five different values static that is,

4
00:00:25,500 --> 00:00:31,850
the default value related absolute fixed and sticky,

5
00:00:31,850 --> 00:00:41,370
beginning with related position that allow us to shift our elements around in relation to

6
00:00:41,370 --> 00:00:44,760
where they would have bean blessed by default.

7
00:00:44,760 --> 00:00:48,660
Using related position,

8
00:00:48,660 --> 00:00:52,450
you need to specify the amount that you want to shift.

9
00:00:52,450 --> 00:01:01,680
The ailment using four properties top left bottom and rights followed by a value dead

10
00:01:01,680 --> 00:01:09,510
corresponds to the distance to shift for the next example.

11
00:01:09,510 --> 00:01:18,760
I want to apply that situations to the two deeps that I have defined in HTML for the 1st 1

12
00:01:18,760 --> 00:01:22,190
I define a week off 300 pixels.

13
00:01:22,190 --> 00:01:35,740
ICT off 100 pixels ended our great background color in the second day,

14
00:01:35,740 --> 00:01:37,060
if I ever.

15
00:01:37,060 --> 00:01:39,750
With off 400 pixels,

16
00:01:39,750 --> 00:01:52,080
I've off 100 pixels and green as the background color in the brother.

17
00:01:52,080 --> 00:01:58,480
We see the expected position off the deeps being one on stop off the other.

18
00:01:58,480 --> 00:02:06,480
If we now set to the first related position,

19
00:02:06,480 --> 00:02:13,600
giving a value off 20 pixels to the top property and 40 pixels to left.

20
00:02:13,600 --> 00:02:23,450
It turns out that the first dif change position 20 pixels from the top and 40 pixels from

21
00:02:23,450 --> 00:02:30,860
the left side changing its final position and the second dif without changes.

22
00:02:30,860 --> 00:02:41,920
If I applied to the second day of the same values I created for the 1st 1 is expected at it

23
00:02:41,920 --> 00:02:43,440
can be seen dead.

24
00:02:43,440 --> 00:02:44,000
Second,

25
00:02:44,000 --> 00:02:48,720
Dief is in the same position related to the second if,

26
00:02:48,720 --> 00:02:49,500
as it happened,

27
00:02:49,500 --> 00:02:56,930
it initially since the same offset values were applied to the two chiefs,

28
00:02:56,930 --> 00:03:09,440
I will now give a final example for the related position in disguise.

29
00:03:09,440 --> 00:03:18,060
If you want to put the second eve on the right side off the 1st 1 for the situation,

30
00:03:18,060 --> 00:03:23,870
I will have to move the second if up to 100 pixels,

31
00:03:23,870 --> 00:03:31,830
which corresponds to a value off minus 100 pixels to the top property end to the right,

32
00:03:31,830 --> 00:03:40,050
corresponding to a left side offset that has to be equal to do with value off the first def

33
00:03:40,050 --> 00:03:42,400
in disguise,

34
00:03:42,400 --> 00:03:51,680
300 pixels we can now see the thieves are side by side as expected.

35
00:03:51,680 --> 00:04:03,600
Now the absolute position that allows the place any patch element exactly where you want

36
00:04:03,600 --> 00:04:08,020
using again properties top left,

37
00:04:08,020 --> 00:04:11,500
bottom and right to set the location.

38
00:04:11,500 --> 00:04:19,660
One important detail is that the position off the element is based on its closest position

39
00:04:19,660 --> 00:04:26,800
assessor position for the situation Body is the closest ancestor.

40
00:04:26,800 --> 00:04:33,450
What makes that shift that I give to defense is based on my entire page.

41
00:04:33,450 --> 00:04:46,600
First I changed first dif with to 400 pixels and second to 300 peoples.

42
00:04:46,600 --> 00:04:58,630
And if I said the first and second defeat to the absolute position and and left and top

43
00:04:58,630 --> 00:05:10,590
properties with zero value that makes that two thieves are placed on the top left off the

44
00:05:10,590 --> 00:05:11,420
batch,

45
00:05:11,420 --> 00:05:15,050
we'd second dif above first.

46
00:05:15,050 --> 00:05:27,050
Now if I change left until values off second Eve to 100 pixels,

47
00:05:27,050 --> 00:05:37,010
you see that this div moves to other parts of the patch corresponding to the shift That's I

48
00:05:37,010 --> 00:05:44,040
apply now to finish the foot position.

49
00:05:44,040 --> 00:05:46,900
I present another different situation,

50
00:05:46,900 --> 00:05:50,710
creating assertive within the second.

51
00:05:50,710 --> 00:05:59,020
With this structure off gives the second Dief is the ancestor off the search.

52
00:05:59,020 --> 00:06:10,150
So if I create for 30 if with absolute position and left value off 50 pixels,

53
00:06:10,150 --> 00:06:15,710
this dif will move from left to right,

54
00:06:15,710 --> 00:06:24,430
50 pixels related to the position off the second if and not in relation from the top left

55
00:06:24,430 --> 00:06:25,690
off the page.

56
00:06:25,690 --> 00:06:35,320
There is also a second type of absolute CSS positioning called fixed positioning,

57
00:06:35,320 --> 00:06:44,020
which you can use to locate an HTML element at an exact place in relations to the user's

58
00:06:44,020 --> 00:06:46,450
screen in step off brother.

59
00:06:46,450 --> 00:06:55,680
We know the difference to absolute here is that the ailment will remain in exactly the same

60
00:06:55,680 --> 00:06:56,500
position,

61
00:06:56,500 --> 00:07:08,300
even if the user scrolls down the page is what you see now where I said the first div with

62
00:07:08,300 --> 00:07:13,870
the fixed value for the position property and I placed the second,

63
00:07:13,870 --> 00:07:23,110
the further down the page and we the ICT off 1000 pixels to be able to scroll the badge and

64
00:07:23,110 --> 00:07:24,750
see the respective effect.

65
00:07:24,750 --> 00:07:25,390
As it is,

66
00:07:25,390 --> 00:07:27,850
we're five now on the page.

67
00:07:27,850 --> 00:07:35,650
The first def stays in the same place even when you are strolling the page.

68
00:07:35,650 --> 00:07:39,180
Finally,

69
00:07:39,180 --> 00:07:46,050
this sticky value where the elements is position it based on the user's scroll position.

70
00:07:46,050 --> 00:07:52,550
A sicky element changes between related and fixed,

71
00:07:52,550 --> 00:08:00,670
being treated as related position at first until it crosses a specific threshold at which

72
00:08:00,670 --> 00:08:01,170
point,

73
00:08:01,170 --> 00:08:04,130
it is treated as a fixed positions.

74
00:08:04,130 --> 00:08:11,670
Let's see an example to understand better disposition value.

75
00:08:11,670 --> 00:08:18,640
I have now on the batch set one paragraph and two chiefs,

76
00:08:18,640 --> 00:08:23,950
the first dif I set with sticky value.

77
00:08:23,950 --> 00:08:33,550
And for the second I add the merging top property with Valley off 200 pixels.

78
00:08:33,550 --> 00:08:40,820
Despite the two dif and I off 2000 pixels.

79
00:08:40,820 --> 00:08:44,850
To be able to use the scroll to see the effect,

80
00:08:44,850 --> 00:08:54,790
it's now necessary to defining the first Deve di Tresh hold that will tell at which point

81
00:08:54,790 --> 00:08:56,470
did Eve becomes fixed.

82
00:08:56,470 --> 00:09:00,190
In this example,

83
00:09:00,190 --> 00:09:04,840
I defined the top property with the value 10 pixels,

84
00:09:04,840 --> 00:09:09,940
which will cause that when the Deve is at this defined distance,

85
00:09:09,940 --> 00:09:16,350
it will remind fixed a situation that you can see now into the browser.

86
00:09:16,350 --> 00:09:26,450
If you want to change the position in which it is fixed up or down,

87
00:09:26,450 --> 00:09:30,650
just changed the value off the top property.

88
00:09:30,650 --> 00:09:40,920
I have now changed zero and you see differences when compared with previous example,

89
00:09:40,920 --> 00:09:43,370
we tend pixels for top value,

90
00:09:43,370 --> 00:09:46,920
thinks