how to use absolute position property?

 

Element positioning is one of the toughest arguments regarding the CSS. In today’s article we will deal with the use of the “position” property which allows the positioning of an element inside our web page subtracting it from the normal flow of the document.
In details we are going to see how to use the “absolute” value which can be assigned to this property for positioning graphic elements inside our layouts.

What does the position property do?

The “position” property serves to precisely position an element inside the web page shifting it from the normal flow of the document.

What is the meaning of what we just said?

The understanding and use of the “position” property is not always clear and immediate for everybody. In order to make you better understand what we just said let’s have a look at an explanatory example first before exploring in-depth the values which can be assigned to this property.

An example to make it clear

We are going to make a page which has got a title at the head of the document and which displays below a grey box containing a text paragraph.
The HTML markup we are going to use will be the following:

?

<h1>CSS: use of the property <em>position</em></h1>   <h2>Standard positioning of an element</h2>   <h3>Box containing a paragraph</h3>   <div class="box-1">     <p>         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet erat         pharetra libero malesuada rhoncus.     </p> </div>

To which we will associate the following CSS rule to create our box of a grey background:

?

.box-1 {width:300px;margin:10px;padding:10px;background:#d8d7d7;}

Have a glance at the example page we just created.

As you can see the grey box is found immediately under the titles: this because in our HTML markup the box has been added last after the H1, H2 and H3 tags used.

How’s it possible to move an element of the layout without touching the HTML markup?

Now, despite the box is located at the end of our HTML markup, immediately under the H1, H2 and H3 tags, through the use of the “position” property, we will see how it is possible to move it from the normal flow of the document and display it at a random point of the page.
In our example we try to display the grey box in the beginning of the page, in the upper left corner. Without touching the HTML markup we add the “position” property to our box and assign the “absolute” value in the following way:

?

... .box-1 {width:300px;margin:10px;padding:10px;background:#d8d7d7;position:absolute;top:0;left:0;} ...

As you can see in this second example, the grey box has now been moved to the upper left corner of the page despite that in the HTML markup it continues to be found in the final part of the document.

Thus we just saw that setting the “absolute” value to the “position” property we can position whatever element inside the page in absolute mode.

What does positioning in absolute mode mean and which are the values that this property can assume?

As a predefined setting the value of the “position” property is set on “static” and represents the normal position occupied by each element in the flow of the document.
The values that the “position” property can assume are the following:

• static: as I already mentioned it’s the predefined value and represents the normal position occupied by each element in the flow of the document;
• absolute: indicates that the element should be positioned in absolute mode compared to the first parent element which has a position other than “static”. The element is positioned according to the coordinates provided through the “top”, “left”, “right” or “bottom” properties.
• relative: indicates that the element should be positioned in relative mode compared to its own normal position. Even in this case it is positioned according to the coordinates provided through the “top”, “left”, “right” or “bottom” properties.
• inherit: indicates that the value of the “position” property should be inherited from the parent element.

Recap: when we position an element, it is possible to specify with regard to which other element of the page we are positioning it through the coordinates we provide.

Any further elaboration on absolute positioning?

In our second example we saw how through the use of absolute positioning it was possible to position our box in the upper left corner of the document. This position has been indicated through the coordinates provided with the “top” and “left” properties:

?

... .box-1 {width:300px;margin:10px;padding:10px;background:#d8d7d7;position:absolute;top:0;left:0;} ...

Having set the zero value for both coordinates (both “top” and “left”) our box has been positioned to zero pixels of distance from the upper margin of the browser window and to zero pixels of distance from the left margin of the browser window.

Why has exactly the browser window been taken as reference?

We said that the element is positioned in absolute mode compared to the first parent element which has a position other than “static”. Not having in our document any element with position other than “static” the positioning occurs according to the HTML root element which coincides with the browser area. That’s why in this case the positioning has been made in relation to the browser window.

What if we wanted to position our box in relation to another element?

If we wanted to position our box in relation to another element rather than the browser window enough assigning to the element (regarding which our box will be positioned) a different positioning from “static” and adding the HTML markup of the box inside this element.
The element can be positioned in absolute mode in relation to another element present in the page providing the coordinates through the use of the “top”, “left”, “right” or “bottom” properties.
Let’s see a real example of the application of this technique on our blog.
Last month somebody on our italian forum asked for technical details on how the container in a balloon shape used for the comments on our blog was made and he was curious in particular to know how the later made it to adapt each time according to the size of the comment.

In reality the balloon which contains our comments has only one graphic element: the image of the arrow which indicates the avatar of the author of the comment. The rest is nothing else but a box of a grey background – exactly like the one used in the two previous examples – whose four angles have been rounded through the use of the new CSS3 module “border-radius”.
We change the type of positioning for this box which as predefined setting has the “static” value and we change it to “relative”. In this way whatever element inside the box which will make use of “position:absolute” will be positioned in relation to the box and no longer in relation to the browser window.
This is the CSS rule created for our box:

?

... .box-1 {width:470px;margin:60px 10px 100px 50px;padding:20px;background:#d8d7d7;position:relative;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;} ...

And this is the HTML markup used:

?

<div class="box-1">     <p>         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet erat         pharetra libero malesuada rhoncus.     </p> </div>

Below you can see a screenshot of the box just completed:

At this point it becomes easy to position the arrow in absolute mode in relation to our box: it will be enough in fact to load it inside the box giving it an absolute positioning and providing the coordinates through the “top”, “left” properties in relation to our box.
Meanwhile we load the arrow inside the box adding the following line to the HTML markup realized previously:

?

<img src="images/arrow.gif" class="arrow" alt=" " />

As you can see I have assigned to the image a class denominated “arrow” which will serve for setting its positioning in relation to the box. For the time being the rule has not yet been defined inside our style sheet, in fact if we try to reload the page we will display the arrow’s image inside the box but below the text, like it is located at this moment in the normal flow of the document:

Now in our style sheet we define the rule “img.arrow” for positioning the arrow in an absolute mode exactly where we want it to be displayed we provide the coordinates through the “top” and “left” properties:

?

... img.arrow {position:absolute;top:30px;left:-22px;} ...

You can see the final result in this example page.

Conclusion

The positioning of elements – as I already mentioned – is one of the toughest arguments regarding the CSS, but a good web designer should absolutely have complete mastery of these properties. In some future article we will see in details also the other values which can be assigned to the “position” property and you will see how, by defining very simple rules on our style sheets, results of an optimal aesthetic impact can be obtained.