Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to use the Position property - CSS

In this article I will teach you to use the Position property of CSS. Remembering that this is a property of CSS 2.1 and works perfectly in all modern browsers.

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

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

array4

Listing 3: Css

* {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.

<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

array4

Listing 6: Css

* {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

<body>

<div>
I am a <h1> h1 </ h1>
</ Div>

</ Body>

Listing 8: Css

* {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

array4

Listing 10: Css

* {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.

Well folks, I hope it has become clear to you the power of the position property. I hope you have enjoyed, soon more posts by CSS and HTML.

Leandro Oriente front end developer



Front-end Developer at Peixe Urbano

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login