1
00:00:00,150 --> 00:00:06,360
Another position property is absolute positioning absolute positioning will ensure the element stays

2
00:00:06,360 --> 00:00:11,160
in the exact same position specified in the style rule.

3
00:00:11,160 --> 00:00:16,620
It does not consider the flow of the page when you resize the browser window.

4
00:00:16,640 --> 00:00:20,530
Let's take a look at an example to illustrate this concept.

5
00:00:21,170 --> 00:00:26,220
See we added a block of text above our div tags.

6
00:00:26,380 --> 00:00:40,060
I'm just copying a block of text and I'm going to add it above the div tags here.

7
00:00:40,070 --> 00:00:51,740
Now I'm going to save the file and we're going to preview this page in the web browser.

8
00:00:51,790 --> 00:00:59,790
Take a look at what happens when we scale the browser when we resize it to bigger and smaller

9
00:01:04,400 --> 00:01:10,280
you'll see that the div is moving up and down to accommodate the text as the browser shrinks and expands

10
00:01:17,400 --> 00:01:18,660
with relative positioning.

11
00:01:18,660 --> 00:01:21,060
The div moves with the flow of the page.

12
00:01:22,930 --> 00:01:26,380
Now let's change the position of our parent div to absolute

13
00:01:29,590 --> 00:01:29,980
keeping.

14
00:01:30,030 --> 00:01:37,880
Remember that div 1 is our parent and we'll change the position to absolute.

15
00:01:38,230 --> 00:01:40,540
Now when we save the page and refresh it

16
00:01:43,670 --> 00:01:51,620
you'll see that the that the div remains in the exact same position as specified in our style declaration.

17
00:01:51,620 --> 00:01:53,520
This is regardless of what we do.

18
00:01:53,540 --> 00:02:02,330
So if we were to resize the browser No the parent div will stay in the exact same position we specified

19
00:02:04,580 --> 00:02:10,980
notice that the nested div div 2 is still relative to its parent div.