Helpful Links

CSS Positioning Examples

CSS Tricks: Positioning

Position Offsets

• top
• right
• bottom
• left

Position: Absolute

Elements with absolute positioning are neither affected by or do not affect other elements in the normal flow of the page.

They are like layers in Photoshop or Illustrator; you’re free to place them anywhere you wish on the page.

Positioned elements rely on you telling the browser where to place them, using values called positioning offsets, for the element’s top, right, bottom or left position.

When you use absolute positioning, you place the absolutely positioned elements in relation to a parent container; the parent container is the positioning context.

You can change the positioning context to other containing elements; this lets us position elements precisely where we want them.