2013年2月6日 星期三

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

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


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



一、什麼是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/

沒有留言:

張貼留言