振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
CSS網頁中的相對定位與絕對定位
2010/01/20
CSS網頁中的相對定位與絕對定位

這樣的一個指令:(position),在DreamWeaver中文版中翻譯為“定位”,常用的屬性有兩個:relative(相對)與 absolute(絕對)。有很多朋友對這條指令的用法還是不清楚,這裡做一些細緻的講解。

position:relative; 表示相對定位,被定位了這個屬性的標籤在所屬的範圍內可以進行上下左右的移,這裡的移動與padding或是margin所產生的位置變化是不一樣的。padding與margin是元素本身的一種邊距與填充距離並不是真正的移動,而被定義為relative的元素是真正的移動,這所產生的移動距離是從margin的週邊到父級標籤內側之間這一段。

position:absolute; 表示絕對定位,如果定義了這個屬性的元素,其位置將依據流覽器左上角的0點開始計算,並且是浮動正常元素之上的。那麼當你需要某個元素定位在流覽器內容區的某個地方就可以用到這個屬性。

於是產生了一個問題:現在大家做的網頁大部分是居中的,如果我需要這個元素跟著網頁中的某個元素位置,不論螢幕的解析度是多少它的位置始終是針對頁內的某個元素的,靠單純的absolute是不行的。

正確的解決方法是:在元素的父級元素定義為position:relative;(這裡可以是祖父級,也可以是position:absolute;,需要絕對定位的元素設為position:absolute; 這樣再設定top,right,bottom,left的值就可以了,這樣其定位的參照標準就是父級的左上角padding的左上側。  

 

相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇