Thursday 4 April 2013

How to use the Position property - CSS

How to use the Position property - CSS

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

1
h1 {position: static}

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

1
array4

Listing 3: Css

1
2
3
4
5
6
* {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;}
Result: img1
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.

1
2
3
4
5
6
7
8
9
10
<div>
 
<h1>
 
<span> </ span>
 
</ H1>
 
<p> </ p>
</ Div>
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 common flow of the document and the space for it ceases to exist in the document. Ex:

Listing 5: Html

1
array4

Listing 6: Css

1
2
3
4
5
6
7
8
* {Margin: 0; padding: 0;} / * Reset * /
body {background: # 000;}
div {background: # eee; margin: 50px;
width: 300px; height: 300px; position: relative;
}
h1 {position: absolute; top: 20px; left: 20px;
outline: 1px solid # 444;}
h2 {outline: 1px solid # f90;}
Result: img2
Note that the element H2 assumed the top of DIV element, respecting the normal flow of the document, while H1 is now positioned at a distance of 20px the top and left, but outside the flow, being above the other elements.
An important detail is that you can use negative measures and position the elements in places that before were impossible to reached.

Listing 7: Html

1
2
3
4
5
6
7
<body>
 
<div>
I am a <h1> h1 </ h1>
</ Div>
 
</ Body>

Listing 8: Css

1
2
3
4
5
6
7
* {Margin: 0; padding: 0;} / * Reset * /
body {background: # 000;}
div {background: # eee; margin: 50px; width: 300px;
height: 300px; position: relative;}
h1 {position: absolute; top:-20px;
left:-20px; outline: 1px solid # 444; background: # fff;
}
Result: img3

Fixed positon:

The fixed position behaves similarly to the absolute, leaving part of the common flow of the page. But the big difference is that this one goes on to referencing the window of your browser, the area that appears to the user regardless of the scroll bar:.
img4

Listing 9: HTML

1
array4

Listing 10: Css

1
2
3
4
5
6
7
* {Margin: 0; padding: 0;} / * Reset * /
body {background: # 000;}
div {background: # f90; width: 300px; height: 1500px; position: relative;}
h1 {position: fixed; top: 0 left: 20px; right: 20px;
outline: 1px solid # 444; background: # fff;}
h2 {position: fixed; bottom: 0; left: 20px; right: 20px;
outline: 1px solid # 444; background: # fff;}
Result: img5
Note how the element H2 is positioned at the bottom of the page due to bottom: 0 and positioned H1 at the top because the top: 0. Note also that the page has vertical scroll bar due to the height of the DIV but the H2 respected the window.
Social networks and blogs have used this feature a lot. Even Facebook has set the bar higher regardless of user navigation and alerts Twitter always appear at the top of the page. This can be reached easily by using the fixed position property.

Read more: http://mrbool.com/how-to-use-the-position-property-css/24459#ixzz2PZ6kFvQY

No comments:

Post a Comment