CSS Tutorial :: Part V

CSS Example #22

Positioning in CSS

One of most important aspects of CSS is the ability to place blocks in any part of an HTML document, either if they follow the flow of the document or not. By blocks I refer to any section of an HTML document that can be affected by stylesheets and manipulated as if it were a single element, independently of being composed of only one or multiple elements. This ability of CSS is used by DHTML (Dynamic HTML) implementations, that are able to modify the layout of an HTML document by modifying the CSS properties with a web programming language. Usual HTML elements used to compose blocks are div (a block-level element) and span (an inline element). Basically, there are three types of positioning: fixed, absolute and relative.

Fixed positioning allows to place an element as if it were attached to the screen instead of being part of the document. This positioning takes as reference the top left corner of the screen. When we do scroll on the document, the fixed elements remain in their positions. This is very useful when want an element to be always visible, for example, a navigation bar for a long document, that can be used no matter in which position on the document we are.

Absolute positioning allows to place an element in nearly any position on the document without attending to its natural flow. This positioning takes as reference the top left corner of the parent element of the block that we want to position. Differently from fixed positioning, the elements are integrated in the document and will move with it when scrolling. They are attached to the document and not to the screen.

Relative positioning preserves the block in the natural flow of the document, and it is only possible to define the distance from the top and left borders to the nearest element on the document flow.


Once we know which are the reference points that our elements will use to calculate their positions, we need to indicate the distances from the top left corner to the parent element, be it the screen, a parent element or the nearest element in the flow. Here an example of absolute positioning:

<style type="text/css">
#my_block {position:absolute; top:20px; left:25px;}

CSS absolute positioning

Now an example of relative positioning:

<style type="text/css">
#my_block {position:relative; top:30px; left:40px;}

CSS relative positioning

This type of positioning is called relative because it takes as reference point the place that the element would occupy if it were in the flow of the document.

It is possible to do combinations with different types of positioning, when there are elements nested inside elements that have a different type of positioning. Let's see an example:

<style type="text/css">
#relative_one {position:relative; top:12px; left;12px;}
#absolute_one {position:absolute; top:20px; left:15px;}

<span id="relative_one">
Relative One <div id="absolute_one">Absolute One</div>

CSS relative-absolute positioning

To specify the size of a block we use the properties width and height:

<style type="text/css">
#relative_one {position:relative; top:12px; left;12px; height:60px; width:60px;}

CSS block positioning and size

In CSS, elements have not only a two-dimensional positioning, but also a three-dimensional one, indicated by the property z-index. The idea here is that z-index would represent the axis that goes from the screen to the user. By assigning an integer numeric value to z-index, we can determine which blocks will overlap other blocks; elements with higher value will overlap elements with lower value.

CSS block z-index positioning

When we define a block of a certain size and the content inside this block exceeds its size, we may use the property overflow to control the behaviour of the browser. The possible values are: hidden, visible, auto and scroll.

hidden: when the content exceeds the size of its container, everything that is outside the container must be invisible.

visible: when the content exceeds the size of its container, the size of the container must be increased as required.

auto: when the content exceeds the size of its container, the browser should display scroll bars to allow visualize the exceeding content.

scroll: the browser will display scroll bars in the container, either if an overflow exists or not.

<style type="text/css">
#block_1 {position:absolute; top:20px; left:20px; height:100px; width:100px; overflow:visible;}

The last property that we will see here is visibility, which simply indicates if a block should be visible or not. The possible values are hidden and visible. This property makes sense when modifying the CSS properties in a DHTML environment, where a web programming language would hide and display blocks as required to achieve certain functions. In static HTML documents this property is hardly of any use.