#3 Div Positioning

The previous page did not use CSS Positioning:

1. position: static


• The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
• Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.
• example:
  
  #sidebar {
  position:static;
  }

2. position: relative
If you specify
position: relative,
then you can use:
top, bottom, left or right
to move the element
relative to where it would normally occur in the document.

#stuff{
position:relative;
top:-100px;
right:40px;
}

Next >

3. position: absolute

When you specify position:absolute,
the element is removed from the document and placed exactly where you tell it to.

#absoluteStuff{
position:absolute;
top:0;
right:0;
width:200px;
}

?. position: fixed
not talked about in: Learn CSS Positioning in Ten Steps

When you specify position:fixed,
the element is removed from the document and placed exactly where you tell it to. But, unlike "absolute" it stays in place when you scroll up & down or side-to-side.

#fixedStuff{
position:fixed;
bottom:5px;
left:20px;
}