1
00:00:00,690 --> 00:00:02,150
Hello and welcome.

2
00:00:02,190 --> 00:00:03,980
In this to you.

3
00:00:04,070 --> 00:00:05,700
We will be true.

4
00:00:05,710 --> 00:00:08,270
What a reality position.

5
00:00:08,320 --> 00:00:10,520
It's a reality.

6
00:00:10,530 --> 00:00:18,590
Position is a position that is relative to the normal position he was created in.

7
00:00:18,750 --> 00:00:26,790
So the reality position is affected way in the top right bottom left.

8
00:00:26,810 --> 00:00:29,910
Properties are just.

9
00:00:30,270 --> 00:00:40,470
So by default we see it relative positioned element appear normal like they are static but they can

10
00:00:40,470 --> 00:00:50,430
be repositioned using the top right bottom left properties to adjust from the normal static position.

11
00:00:50,430 --> 00:01:01,110
But when they are created they do assume a static position which can be affected by setting the properties

12
00:01:01,110 --> 00:01:06,400
for the top right left or bottom corner.

13
00:01:06,420 --> 00:01:12,290
Let me show you an example is always set up when you see the examples for these.

14
00:01:12,540 --> 00:01:20,850
Okay I've got three deaves here have given them giving deaves given them in width and height so that

15
00:01:20,880 --> 00:01:26,810
they are pronounced have also displayed them in line block.

16
00:01:26,970 --> 00:01:30,020
So deaves are block elements.

17
00:01:30,030 --> 00:01:37,440
That means when they're created they appear on separate lines but I have use the display property to

18
00:01:37,470 --> 00:01:43,070
stack the mob horizontally so if I expand this browser you can see.

19
00:01:43,080 --> 00:01:45,610
So right so these are the boxes.

20
00:01:45,800 --> 00:01:53,800
So at the moment I have set the position at the moment is normal or static.

21
00:01:53,830 --> 00:01:58,770
This is how they are created by what out for the Green Box.

22
00:01:58,770 --> 00:02:06,290
Here I am going to play a reality position which will affect it.

23
00:02:06,360 --> 00:02:16,620
He will move from the original position compared to the blue box this pior have applied a reality position

24
00:02:17,130 --> 00:02:19,810
to the green box here.

25
00:02:20,080 --> 00:02:22,660
Hi I have made some movement.

26
00:02:22,710 --> 00:02:33,070
I have told it to move 30 pixels from the top and also all 30 pixels from the left.

27
00:02:33,090 --> 00:02:40,140
So by doing this it will shift from the origin or normal position of the other blue boxes.

28
00:02:40,140 --> 00:02:42,910
So let's see that in full screen.

29
00:02:43,080 --> 00:02:50,640
Right so this is the dreambox I have applied pics a value of 30.

30
00:02:50,790 --> 00:02:59,280
I told it to move in relative to the original position deal original position is where the blue boxes

31
00:02:59,280 --> 00:02:59,760
are.

32
00:02:59,940 --> 00:03:07,250
So I've now told it to move 30 x has from the top to move down from total pigs from the top moved total

33
00:03:07,260 --> 00:03:15,300
pixels and I'm also told from left to move 30 pixels so that is top.

34
00:03:17,360 --> 00:03:19,630
Right bottom left.

35
00:03:19,670 --> 00:03:25,830
So from left we have told it or move we take pictures as you see that big gap.

36
00:03:25,910 --> 00:03:27,440
Look at the gap between these two.

37
00:03:27,440 --> 00:03:35,690
School most normal gap here is why that because this green box has moved so it's all turned the position

38
00:03:36,140 --> 00:03:39,340
relative to the other blue boxes.

39
00:03:39,380 --> 00:03:49,470
What happens when a relative position of cause and an element is moved the space you notice is creating

40
00:03:49,470 --> 00:03:50,500
some space.

41
00:03:50,660 --> 00:03:55,550
That space is not occupied by any other element on the page.

42
00:03:55,550 --> 00:03:59,120
If you look out we've got a page tag here in town.

43
00:03:59,230 --> 00:04:05,060
We give a paragraph of text text a paragraph tag and also the Are there blue boxes.

44
00:04:05,240 --> 00:04:13,650
But none of them will take up this space created by this box moving from its original position.

45
00:04:13,820 --> 00:04:21,920
So the other content or the other the other deaves on the page will not be adjusted to fit into any

46
00:04:21,920 --> 00:04:25,030
gaps provided by this green box here.

47
00:04:25,250 --> 00:04:33,250
So this is how reality position works when an element is set to a relative position.

48
00:04:33,300 --> 00:04:36,470
Can I just any of the callers at the top.

49
00:04:36,590 --> 00:04:37,250
Right.

50
00:04:37,310 --> 00:04:44,900
But on the left where you just it will obviously create some space because it would have moved or shifted

51
00:04:45,200 --> 00:04:47,550
from its whole original position.

52
00:04:47,600 --> 00:04:55,440
However the gap that is left is not occupied or adjusted by the other elements on the page.

53
00:04:55,460 --> 00:05:00,860
If you notice all the other elements I did have maintained their original position.

54
00:05:01,000 --> 00:05:12,340
The paragraph tag here the header tag is blue boxes the divs or kept position I live in that move is

55
00:05:12,340 --> 00:05:16,500
a green box because he has had a relative position set on it.

56
00:05:16,670 --> 00:05:21,850
But the gaps left is not occupied so the gaps will be left there.

57
00:05:22,040 --> 00:05:26,340
None of the other elements on the page will take all that space.

58
00:05:26,510 --> 00:05:36,260
In this video we went through what a reality position its reality position can have.

59
00:05:36,260 --> 00:05:44,740
The top right bottom left properties of a relatively set amount affected.

60
00:05:45,050 --> 00:05:55,280
What happens in the space of the gap created by that element moving is not just turned or occupied by

61
00:05:55,400 --> 00:05:59,040
any other element in that page.

62
00:05:59,090 --> 00:06:03,310
So the only element that is affected is a lemon.

63
00:06:03,340 --> 00:06:11,520
The relative position of this applies to every other element on the page maintains their position.

64
00:06:11,540 --> 00:06:15,330
Thank you so much and I hope he has made sense.

65
00:06:15,340 --> 00:06:18,580
It's been a pleasure doing this for you by now.