1
00:00:05,370 --> 00:00:09,630
Let's keep on viewing the CSF space properties.

2
00:00:10,840 --> 00:00:18,550
In this lesson, we are going to see the property's relative to positioning and in particular we are

3
00:00:18,550 --> 00:00:20,260
dealing with position.

4
00:00:20,920 --> 00:00:29,350
Position is a property which can place an element according to the type of positioning we are going

5
00:00:29,350 --> 00:00:30,340
to insert.

6
00:00:33,450 --> 00:00:43,740
By default, the position that you can insert is static, so static position, and it's a default value

7
00:00:43,740 --> 00:00:52,440
that basically lets the property we are modifying exactly where it is by saving and refreshing.

8
00:00:53,070 --> 00:00:59,400
In fact, you see that our age twos haven't changed their position at all.

9
00:01:00,030 --> 00:01:08,700
Among the attributes which are relative to position, which can be inserted instead of static, absolute

10
00:01:08,700 --> 00:01:09,720
stands out.

11
00:01:10,200 --> 00:01:17,870
Absolute, in fact, enable us to place a specific selector in within a specific.

12
00:01:19,170 --> 00:01:27,630
In an absolute position so that it does not depend on the rest of the content, therefore independently

13
00:01:27,630 --> 00:01:31,110
from paragraphs or other parts of the content.

14
00:01:32,360 --> 00:01:39,680
That take our age to below or above other tags with absolute.

15
00:01:40,920 --> 00:01:47,940
He will overlap a pre-existing content, making the section, not having any type of influence on the.

16
00:01:50,840 --> 00:01:55,070
Therefore, if we save and fresh, we can see that absolute.

17
00:01:56,420 --> 00:02:02,150
Led out to sections above the text, which is now underneath the.

18
00:02:04,860 --> 00:02:15,810
When we insert the position attribute, we have the chance also to insert some left to right, top and

19
00:02:15,810 --> 00:02:26,550
bottom values, which move according to the pixels associated to those properties, the absolute position

20
00:02:26,670 --> 00:02:27,570
of the tag.

21
00:02:27,840 --> 00:02:36,930
Therefore, if I inserted, for example, left in this case, applying a hundred pixel is a value saving

22
00:02:36,930 --> 00:02:38,040
and refreshing.

23
00:02:38,340 --> 00:02:45,630
As you can see, our sections are not at the beginning of the page, but they are placed a hundred pixels

24
00:02:45,630 --> 00:02:46,900
away from the left.

25
00:02:46,950 --> 00:02:53,860
And in this case, if I insert, for example, the top value here as well, I might insert a hundred

26
00:02:53,940 --> 00:02:54,750
pixels.

27
00:02:54,990 --> 00:03:03,600
We will see how the result gets overlooked because in this case, the H2 tag was inserted twice in the

28
00:03:03,990 --> 00:03:10,180
HTML page and so both start at a hundred pixel distance from the top.

29
00:03:10,410 --> 00:03:12,830
Consequently, there would be overlapped.

30
00:03:13,110 --> 00:03:16,740
Therefore, let's delete our left and top.

31
00:03:16,740 --> 00:03:25,470
And I'm stopping here saying that in addition to the value in pixels, it can take also a value in percentage.

32
00:03:25,710 --> 00:03:34,110
Now let's insert another type of positioning and we are seeing the fixed positioning permitting to insert

33
00:03:34,380 --> 00:03:40,530
according to the position of the tag or to other properties inserted within the selector.

34
00:03:42,220 --> 00:03:51,850
To insert the tag in a fixed position, which will remain independent from any other attack or any movement

35
00:03:51,850 --> 00:04:00,700
of the mouse also due to a simple scrolling, so we saved by refreshing, we would see that the positioning

36
00:04:00,700 --> 00:04:07,710
is the same of absolute which gets overlapped to the rest of the content.

37
00:04:07,840 --> 00:04:17,720
But in this case, by scrolling, this will anyway remain fixed in the same position after fixed.

38
00:04:17,740 --> 00:04:27,100
There's also the relative position which if I save and refresh, as you see, will not produce any type

39
00:04:27,100 --> 00:04:35,950
of change compared to this static position, because with a relative function, if I insert left 50

40
00:04:35,950 --> 00:04:37,840
pixels, for example.

41
00:04:39,200 --> 00:04:48,140
Life saving and refreshing as you see the physician property, we move our heading 50 fixer's away starting

42
00:04:48,140 --> 00:04:56,960
from the left, because the relative position enables to modify these the kiss of the of a certain tack

43
00:04:56,960 --> 00:04:57,760
in the age.

44
00:04:58,040 --> 00:05:06,740
al-Sheik adjusting it away from his normal position from left to right, above or below, according

45
00:05:06,740 --> 00:05:10,760
to the other properties inserted inside our selector.

46
00:05:11,750 --> 00:05:19,580
Therefore, as you see the positioning as well, according to the type of device topic we will see in

47
00:05:19,580 --> 00:05:27,350
the development of our responsive sites, would permit Bazine on the resolution of the device itself

48
00:05:27,950 --> 00:05:35,230
to position any target present in our stylesheets in a certain way.