CSS position 屬性中 reltaive 和 absolution 的差別

這個小小的問題，對許多初學 CSS 的朋友來說，可能是大大的頭痛，剛開始學習 CSS 時也是被一堆 display & position & float ... 等等搞的暈頭轉向.. 就簡單的介紹下兩者的不同吧!!

HTML:(先弄出兩個 div 出來做測試)

<div id="div1"></div>
<div id="div2"></div>


CSS: 
// 這是基本 div 設定
div{
  height:100px;
  float:left;
  border:2px solid black;
}

#div1{
 background:red;   // div1 背景為紅色

}

#div2{
 background:green;   // div1 背景為綠色

}

範例一:  ( div1 & div2 都使用relative，使用position，雖然 div2 設定了 left:30px; 但是完全不會有效果，這是由於 div2 使用了 absolution ，div2 會依據 div1 中 width:150px; 來決定位置<也就是位置永遠定在 150px 了>，並緊貼在後。)
#div1{
  width:150px;
  position:relative;
  left:40px;
 }

#div2{
  width:50px;
  position:absolution;
  left:30px;
}

範例二: ( div1 & div2 都使用relative，div1則會距離左邊留下 40px ，div2 會依據 div1 中 width:150px; 的位置向左 30px ，這時若修改 div1 的大小 width 為 200px，會發現 div2 位置其實就會跑到 200px 再加 div2 中 left:30px; 變成在距離左邊 230px 囉 ^^ )
#div1{
  width:150px;
  position:relative;
  left:40px;
 }

#div2{
  width:50px;
  position:relative;
  left:30px;
}

有空自己試著動動手，改改 width 大小 或  position 屬性，久了就習慣囉 祝好運......