Introduction to positioning

As mentioned several times in this tutorial already, the positioning of elements on a webpage is very fluid. Unlike printing, you don't have a fixed size that you can adjust everything to, because websites are visited from screens in all sizes, from small cell phones to huge desktop monitors, all running in different resolutions. For that reason, elements in a webpage are automatically laid out right after each other, in the order in which they are specified. This positioning model is called static and all elements use it by default.

Positioning is controlled mainly by using the position property, which can have the following values:

Position: static

Static is the default way of positioning elements, so you only have to set the position property to static to override a previously set position. In the static mode, your elements are placed from top to bottom, within the available space of their parent, while respecting any margins set on the element itself or the surrounding elements.

Position: relative

As the name indicates, relative elements can be moved around within their parent element. By default, if you set the position property to relative, the element is placed as if it were static, but you can then use the top, bottom, left and right property to move it around by setting these values relative to the parent element.

Position: absolute

An absolute positioned element is placed exactly where you want it to within the browser window, by adjusting the top, bottom, left and/or right properties. This means that you can place elements e.g. in the top, right corner, even if your main page has been tied to the middle of the screen. The exception to this is if you place an element with an absolute position inside of a relatively positioned element - in that case, the child element will be confined to the space of the parent element instead of the entire window. All of this will of course be demonstrated in the upcoming chapter about absolute positioning.

Position: fixed

By using the fixed property, your element will be positioned as if it were absolute, with one very important addition: When the user scrolls, the fixed element will remain in this position all the time. This allows you to create, for instance, a top menu which remains on screen even when the user scrolls through down through your page.

Floating

Besides the position property, floating of elements also causes the position to be changed - we use the float property for that, which will also be described in this part of the tutorial.

Summary

So, as you can see, CSS supports several different positioning techniques, all of them which will be discussed in more details in the upcoming chapters. Especially absolute positioning, where you take complete control of where an element is placed, is interesting. You should however be very aware of the fact stated above: Your website is very likely to be rendered on screens in MANY different size, so if you decide to use a different positioning approach than the default, you should do so carefully! Read on for a thorough walkthrough of all the possible positioning methods.