Using Absolute Positioning in CSS

In: Uncategorized

26 Jan 2009

Their are a couple things to remember when using Absolute Positioning in CSS.

  1. The Element can be offset from the Top, Bottom, Left or Right of the containing element.
  2. The Element is taken out of normal flow.
  3. The Element will be positioned from its NEAREST POSITIONED ANCESTOR.
  4. If the nearest ancestor element is NOT positioned(i.e. set to position:relative)  the HTML element’s position will be used to set the top, right, bottom and left positions.

CSS Absolute Positioning Example.

The best way to really learn Positioning with CSS is to practice.  Do small test cases until you’ve got it down. You can get a more in-depth explanation from an article by “Big John” Gallant – The difference between “The Flow” and “Positioning” for Web Pages

Other Helpful Links:

Absolute Positioning

  • Share/Bookmark

Comment Form

Follow Me

    Related Links

    RSS See My Latest Photography