1
00:00:00,570 --> 00:00:06,960
Relative positioning allows us to add additional properties to a position declaration that specify the

2
00:00:06,960 --> 00:00:14,050
top left right and bottom position coordinates of the element.

3
00:00:14,160 --> 00:00:31,980
To illustrate an example let's add the following properties to our style rule.

4
00:00:32,010 --> 00:00:36,240
Now if we were to refresh our Web page and take a look at this in our web browser

5
00:00:39,330 --> 00:00:45,900
you'll notice that nothing has changed even though we've specified the top in left position the element

6
00:00:46,080 --> 00:00:51,600
is in the exact same place it was prior to adding those declarations.

7
00:00:51,620 --> 00:00:57,510
The reason for this is because our position is still set to static.

8
00:00:57,830 --> 00:01:01,190
Let's go ahead and change the position to relative and see the difference

9
00:01:07,900 --> 00:01:15,760
we can now see that this element has moved from 50 pixels from the left side of our content area and

10
00:01:15,760 --> 00:01:21,490
50 pixels down from the top of our content area.

11
00:01:21,490 --> 00:01:23,350
Now let's work with nested Divs.

12
00:01:23,410 --> 00:01:30,850
We're going to create a div inside this div and see how the relative positioning is affected when we're

13
00:01:30,850 --> 00:01:35,250
working with nested in parent Divs.

14
00:01:35,330 --> 00:01:37,220
The first thing we need to do is create

15
00:01:40,340 --> 00:01:45,590
the I.D. selector for the nested div we'll call it Div 2

16
00:01:50,590 --> 00:01:52,300
and we'll create some properties for this div

17
00:01:59,720 --> 00:02:05,630
we're making it a different color and we'll also make it a different size so then that we can clearly

18
00:02:05,630 --> 00:02:10,840
see a distinction between our original div and this new nested div

19
00:02:28,500 --> 00:02:38,060
we'll keep the position is relative to see how a relative position div behaves inside of another div

20
00:02:38,070 --> 00:02:40,160
that it also has the same position.

21
00:02:40,160 --> 00:02:44,940
Declaration so we'll go ahead and insert our nested div in our body

22
00:02:47,430 --> 00:02:49,740
reference I.D. selector Div 2

23
00:02:58,280 --> 00:02:59,660
and we'll just save our file

24
00:03:02,660 --> 00:03:07,550
and this is what the the new document looks like.

25
00:03:07,550 --> 00:03:16,720
We can see that our nested div is situated within our parent or container div.

26
00:03:16,740 --> 00:03:24,120
Now we want to move the nested div 80 pixels from the top and left relative to the parent div in order

27
00:03:24,120 --> 00:03:24,810
to do this.

28
00:03:24,840 --> 00:03:41,840
All we need to do is add the top in left declarations to our style rule.

29
00:03:41,930 --> 00:03:51,080
Now when we save our file and refresh we can see that the nested div has moved 80 pixels from the top

30
00:03:51,170 --> 00:04:01,160
and 80 plus pixels from the left relative not to the web browsers content area but to its parent div.

31
00:04:01,450 --> 00:04:02,500
So keep that in mind.