Chapter 18: Position with CSS

One of the best things about CSS is the ability to break the mold and alter positions of the elements on the page. There are four types of positioning. You can choose which type of positioning you want using the using the position property. The four possible values for the position property are static, fixed, absolute, and relative. You can position elements using one of the above in combination with four other positioning properties. These are left, top, right and bottom (in no particular order).

Statically Position Elements

A static element is one that is positioned normally within the flow of the document. All elements on the page are statically positioned by default. You can also explicitly specify a static position using CSS:

 position: static;

Statically positioned elements will ignore any value you specify for the left, top, right and bottom properties. They are static because they cannot be moved!

Relatively Positioned Elements

A relatively positioned element is one that is positioned normally within the flow of the document. You can however move this element, relative to this default position using the top, left, bottom and right attributes.

<p style="position: relative; left: 100px; top: 5px;">Example 1</p>


Example 1

See how the above paragraph has moved 100 pixels across from it's normal position, and 5 pixels downwards from it's normal position. This is because we have added 100px to it's left position, and 5px to it's top position.

<p style="position: relative; right: 20px; bottom: 20px;">Example 2</p>


Example 2

See how the example 2 paragraph has moved 20 pixels towards the left and 20 pixels upwards from where it would normally be positioned? This is because we have added 20 pixels to Example 2's right position, and 20 pixels to it's bottom position. You can also specify negative positions for top, left, bottom and right. You could get the same effect achieved in example 2 by doing the following:

<p style="position: relative; left: -20px; top: -20px;">Example 3</p>

You can also position elements using a percentage amount instead of a pixel value.

<p style="position: relative; left: 50%">Example 4</p>


Example 4

As you can see, Example 4's left:50% style adds 50% of the width of this elements container element to the left position of the paragraph.

Absolutely Positioned Elements

An absolutely positioned element will be removed from the normal flow of the web-page, and will be positioned relatively to it's containing element. This may well be the body element, in which case it will be positioned relatively to the top left hand corner of the page. If the element is inside another element, like a div for example, then the absolutely positioned element will be positioned relatively to that containing elements top left hand corner.

 position: absolute;
 left: 100px;
 top: 50px;

The above will position the div with the id some-div 100 pixels across, and 50 pixels downward from the top left hand corner the containing element (which could be the body element).

 position: absolute;
 right: 100px;
 bottom: 50px;

The above will position the div with the id some-other-div 100 pixels inwards from the right hand side of it's containing element, and 50 pixels upwards from the bottom of the containing element.

When absolutely positioning elements, it's not a good idea to mix and match top and left with right and bottom, as most major browsers will give a different output when you do, meaning you could effect the visitor's experience with your website. It is safe to mix and match with the other position types however.

When absolutely positioning an element you can apply a percentage to the position of the element instead of a pixel value:

 position: absolute;
 left: 50%;
 bottom: 50%;

The above will literally place the element half way across and half way down from the top left of it's parent element.

Fixed Positioning

An element that is given a fixed position will ignore all document flow including any containing elements, and will be positioned relative to the top left hand corner of the page, and will always be at that position even if the user scrolls the web-page. Let's say we want a navigation box that moves down the screen as the user scrolls so that they can get to a different page easily. We could could create a div element with an ID of "navigation" and style it like to:

#navigation { position: fixed; left: 0px; top: 0px; }

That element would always be at the top left, regardless of where the user scrolled to in the web-page.

Please note however, that this won't work in many browsers, including Microsoft Internet Explorer.

Position some elements yourself with the tryout system. Then position yourself comfortably so you can take the quiz, which is fixed in place before the next chapter.