ANdyYoU_蹤雁_數位記錄本

在學習CSS的過程中，相信大家最常遇到的問題就是關於Postion的屬性。尤其是Relative相對位置的用法。

小弟就用一篇文章來介紹這兩個屬性值！

首先是absolute絕對位置，這個屬性很好瞭解，當你打開瀏覽器時瀏覽器的四個邊就會是它用來定位的基準。

紅色的邊就是這樣，你可以設top,bottom,right,left。就是從上下左右邊開始算起。
如上圖小弟設底Bottom:100px; Left:100px; 就會產生該效果。

另外比較常從其他文章上看到的就是被設成絕對位置之後的區塊會從文件流程中
被提出來，就好像是他獨立出來到另一個圖層。
所以用的不好就會產生重疊。


如上圖，就會產生重疊，且依照一開始瀏覽器固定後就不會再變動了。

而大多數人的問題在於相對位置(Relative)這個屬性，怎麼說呢？因為它的效果很難直覺得去感受。
這裡小弟就做了幾張視覺的差異讓大家更清楚明白Relative的用法。

首先，相對位置不是依照瀏覽器的邊當作基準，那最重要的是他用什麼當作基準(0,0)座標或者從哪邊開始算起？
照書上或者官方的說法是從P元素所在處開始。
那是什麼意思呢？
請看下圖紅點↓

虛線是一個Div的區塊，而開始處是和上一個<P>元素從文件流程正常的下一個。
這邊要注意的是P元素和P元素之間通常會有行距。
所以是跨完行距後開始算起。
這樣還不能夠清楚的看懂請看下張圖

淡色是起始位置，而跟上範例的絕對位置Absolute下一樣的座標位置bottom和left都為100px
看懂起始的邊界了嗎？

另外在瀏覽器之間會有不同的變化，以筆者這邊是用FireFox來作範例。
相信各位CSS高手都會覺得CSS比起理論，經驗更是重要。希望大家可以多多交流。

最後補上Postion的語法
DIVname {
     postion:absolute;
     left:10px;
     top:50px;
}