Absolute Positioning

Strictly speaking, absolute positioning involves setting position:absolute and then using top/left/right/bottom to control the outer edge of the "box", from the Box Model. However, I want you learn this one, good pattern:

1. set position:absolute for all elements you want position manually
2. Figure out the content of your element (<div>s probably) and how big they need to be and what sort of border/margin/padding/width/height you want from the Box Model. Omitting height will allow the element to expand/contract down the page as necessary, which may be desirable in , e.g., a magazine style layout.
3. put the upper left corner of the element where it needs to be using top and left.
   • When positioning multiple elements, position the upper left-most one first and then work your way out of the corner
   • You can figure out exactly where things will fall ahead of time but "add, tweak, repeat" works too... be able to position elements given these properties, though (or reverse engineer a layout-- given a layout picture give me properties that will give the layout)

Oh, and play with the Box Model Simulator
(which does Absolute Positioning)

See also: top, left, position, width, and height (and even right and bottom) for more about setting these properties.
See Box Model for more about box model.

Back to Knowledge Dump