After you understand the position property be careful when using it. The focus of this property is to position the small details of layout, for diagramming the site use the Float.
The position property can take four different values: Static, Relative, Absolute and Fixed. Below is the explanation for each one:
Static Position:
This is the default value of every HTML element, it will follow the ordinary flow of your page. Ex:
Listing 1: Default value
[CODE]h1 {position: static}[/CODE]
Position Relative:
Using the position relative, the element pass by accept these properties: Top, Bottom, Left and Right.With them you can change the positioning of the element. Ex:
Listing 2: Html
[CODE]
<body>
<div>
I am a <h1> h1 </ h1>
I am a <h2> h2 </ h2>
</ Div>
</ Body>
[/CODE]
Listing 3: Css
[CODE]
* {Margin: 0; padding: 0;} / * Reset * /
body {background: # 000;}
div {background: # eee; margin: 200px 200px; width: 300px; height: 300px;}
h1 {position: relative; top: 20px; left: 20px;}
h2 {top: 20px; left: 20px;}
[/CODE]
Result:
Note that the H1 is positioned according to the left and top while the h2 kept the common position. This is because elements with static position (default) can not be positioned.
Absolute Position:
The Absolute position is a great stopgap in Css. With it you can position any element according to the parent element that has a position other than static.
Listing 4: Quick explanation of elements of father, son and brother.
[CODE]
<div>
<h1>
<span> </ span>
</ H1>
<p> </ p>
</ Div>
[/CODE]
The DIV element is the father of the H1 elements, P and SPAN. The elements H1, P and SPAN are the children of the DIV element. The H1 and P elements are brothers because they are on the same level. And the SPAN element is a child of the H1 element and also the DIV element.
Continuing the explanation of the Absolute Position:
Be careful when using the absolute positon because it is not part of the comm
...
Post view interrupted. To view full content,
click here
5/12/2012 12:09:00 AM
2012
2012