By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Position Property

How to work with absolute and relative positioning in CSS. Reference on the position property of CSS.

Edited: 2011-07-25 14:28

The CSS position property is used in conjunction with the top, right, bottom, left properties to position elements virsually.

Positioning can also be used to create graphically rich borders, using: BlueBoden's BorderTechnique.

Possible Values

  • inherit
  • static (Default)
  • relative
  • absolute
  • fixed



This just tells the browser, that the element will Inherit the positioning from its parent element.


Elements are by default rendered as static. Elements with their position set to static, are rendered as a part of the normal page flow.

Relative Positioning

Position:relative; takes a given element, and places it relative from its static position in the page.

If a element has position:relative; applied, without having its position modified trough any of: top, right, bottom, left, it will simply stay where originally put by the normal flow.

Applying a relative position for an element, will allow to position its child elements, relativly to its borders using absolute positioning.

Absolute Positioning

Applying a position:absolute; will normally position elements relativly to the html element, rather then the elements that they are placed in. This can however be avoided, by first positioning their containing element. Usually this would be done by applying position:relative;, since this will still keep the elements at their original position, unless modified with any of: top, right, bottom, left.

Consider the below Example:

#Basement {
  position: relative;
  max-width: 800px;
#Banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 170px;

By first applying position: relative; to the ancestor, and then position: absolute; to the child, we anable absolute positioning relatively to the edges of the ancestor.

Fixed Positioning

The fixed positioning is effectively capable of replacing frames. In the case of creating frame-like layouts, usually a fixed position gets applied to division tags. You have all the advantages of using frames, without the disadvantages.

Such as search engines not indexing your sites properly.

Fixed positioning is also useful to simply make a given element stay visible in the viewpoint while scrolling, I.E.

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 145px;
  min-height: 255px;

Inherited? - NO!