Html中，元件位置的控制，Position屬性

位置的控制，Position屬性有四個設定值，整理如下表：

position參數	absolute	relative	static(預設值)	fixed
中文意義	絕對位置	相對位置	靜態位置	固定位置
位置參考基準	父元素內容區邊界	在顯示流中相對其他元件的位置	不變	螢幕視窗最大可視範圍邊界（備註）
移動參考基準	文件	文件	文件	螢幕視窗最大可視範圍
可改變顯示位置	是	是	否	是
可調整大小	是	display為block：可display為inline：否	display為block：可display為inline：否	是
從顯示流中去除	是	否	否	是

一、什麼是fixed ? 最簡單的理解方式，就是很多大陸網站，會有廣告，會跟著你畫面，無論你滑鼠怎麼上下滾，廣告永遠出現在那個位置，那就是fixed的最直接示範。


二、什麼是跟absolute？跟fixed差不多，在畫面上元件都放在固定的位置，但會跟著捲軸的捲動，而跟著上下跑，這就是所謂的absolute。但是，你所設定的位置（left, top是根據你的父親容器來決定，不是螢幕範圍，而且，這個父親還必須具備「位置參數有設定為absolute或relative，如果父親容器沒有設定absolute或relative那就再看上一層父親元件，若沒有這種父親容器，則位置參考就會依據螢幕範圍。）


三、什麼是static？原本瀏覽器預設的就是static，就是按照原本的顯示流來排版，完全不能改變位置（下CSS指令無效）。


四、什麼是relate？比static略有彈性，就是在原本的顯示流上，然後作位置的調整，比方原本的位置流應該要讓元件B放在元件A下方位置，比方在x=20px, y=300px。而指定了left:30px, top:100px的話，就會讓位置出現在x=50px, y=400px了。

備註：


通常用fixed都會指定想放置的位置才對，但是如果你對某個元件沒有指定位置，他會依照顯示流中相對其他元件的位置來放置，但是，畫面捲動時又會固定住位置，不會隨著捲動，然後偶而又會被別的元件蓋住，行為難以理解。



顯示流說明參考：
http://my-web-design.blogspot.tw/2007/10/css-divposition.html



從10種位置範例設定來瞭解：
http://www.barelyfitz.com/screencast/html-training/css/positioning/