Positions in CSS

In the CSS language, positioning can be defined easily combining the use of some of these properties:


position determines how the browser is going to deal with a specific element's attributes. Position accepts 4 values: static, relative, absolute and fixed.

Static is the default value. It means the element will stay where it appears. Fixed will indicate the position in which an element is going to stay compared to the screen (or other). It doesn't matter if you scroll the page or not, it will stay there. Unfortunately, fixed doesn't work well under IE.

Absolute means that the element will stay where indicated. If the user scrolls the screen the element will eventually disappear from his sight. Relative means almost the same, yet not compared to the borders of the screen (like absolute) but to the borders of the element that contains it.

top, right, bottom, left

Top, right, bottom and left indicate how far from a border will the element be, counting, obviously, from its top, right, bottom or left sides.


Overflow tells the browser what to do if an element exceeds the area it has been assigned. It accepts visible, hidden, scroll and auto as alternative, and the default is auto.


The z-index indicates in which order will the layers appeared when they are stacked one over the other.


If I want an element to be placed at the bottom of the screen, I can do it by simply indicating this:

position: fixed;
bottom: 1%;

Heptagrama's logo, for example, is positioned using these CSS instructions:

div#logo {position: absolute; left: 144px; top: 48px; width: 120px}

Knowledge + Computers