1
00:00:00,150 --> 00:00:07,290
We can position our HMO elements in different ways using the position property in our style sheet positioning

2
00:00:07,290 --> 00:00:14,940
is a very important concept because it will be used extensively when developing CSF based web page layouts.

3
00:00:15,050 --> 00:00:23,240
There are four main types of position declarations that we will explore static relative absolute and

4
00:00:23,240 --> 00:00:25,180
fixed.

5
00:00:25,300 --> 00:00:32,270
The first and most basic position declaration is the static position static is actually the default

6
00:00:32,270 --> 00:00:36,890
position of of an element if no position is specified.

7
00:00:36,890 --> 00:00:45,130
We've already worked with this many times on this HMO page we have a div that references I.D. selector

8
00:00:45,400 --> 00:00:54,730
Div 1 we have defined some basic properties including background color with and height.

9
00:00:54,760 --> 00:00:59,540
Note that we have not declared a position property.

10
00:00:59,670 --> 00:01:02,780
Let's take a look at this page in our web browser to see what it looks like

11
00:01:06,780 --> 00:01:12,900
we can see that the div is positioned where we might expect at the top left corner of the content area

12
00:01:13,770 --> 00:01:20,780
because that's where the content of our body would normally begin without specifying a position property.

13
00:01:20,960 --> 00:01:27,380
The default position is known as the static position the element will inherit its position based on

14
00:01:27,380 --> 00:01:30,140
the normal flow of content on the page

15
00:01:33,550 --> 00:01:37,870
if we wanted to specify the position is static.

16
00:01:37,870 --> 00:01:40,990
We could do so by creating this declaration

17
00:01:49,260 --> 00:01:53,110
and when we refresh our web browser there should be no change in positioning.