Tag Archives: layout

CSS position attribute

I didn't fully understand it from w3schools description, so here's a simpler (IMO) explanation after digging the issue a little bit:

  • static (the default!): The browser decides where to put the element, and it's not movable (i.e. one cannot change the position attributes (top, left, bottom, right) )
  • relative: Position attributes can be changed, relatively to the 'where-the-browser-decided' position (i.e. for having an element like the static above, but 5 pixels upper, one can put top: -5px)
  • absolute: One can specify a specific position inside the document, which should be measured from the beginning of the document. (i.e. top: 100px; left: 500px) will be on the x=500, y=100 location from the document's start point (top-left in most cases).
    I've noticed that IE6 sometimes measured the location relatively to the parent element in some cases, but it seems to be fixed in IE7.
  • fixed: Similar to absolute, only that the position is relative to the WINDOW and not the DOCUMENT, thus scrolling doesn't change the position. someone said it's like a watermark.