Positioning Elements

Static Positioning

• This is the default position type
• You do not need to specify position:static
• Specifying top, right, bottom and left will do nothing

#square {

}

Relative Positioning

• The element will be positioned relative to where it naturally occurs in the flow
• Specifying top, right, bottom, and left will move it from it's natural spot

#square {
   position:relative;
   top:-50px;
   left:200px;
}

Absolute Positioning

• The element will be positioned relative to the browser window.
• Where (0,0) is the upper left hand corner
• Specifying top, right, bottom, and left will move it relative to the upper left corner

#square {
   position:absolute;
   top:100px;
   left:50px;
}

Fixed Positioning

• The element will be positioned relative to the browser window
• Where (0,0) is the upper left hand corner
• Specifying top, right, bottom, and left will move it relative to the upper left corner
• The difference between this and absolute positioning is that even when you scroll the browser window a fixed element will not move.
• Try shrinking your browser window and scrolling to see this in action! Best viewed in Chrome, Firefox.

#square {
   position:fixed;
   top:100px;
   left:50px;
}