解讀absolute與relative
作者小毅的博客：http://andymao.com/
很多朋友問過我absolute與relative怎么區(qū)分，怎么用？我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又是相對于什么地方而言的呢？那他們又有什么樣的特性，可以做出什么樣的效果呢？關于兩者之間又有什么樣的技巧呢？下面我們就來一一解讀。
Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
一般來講，網頁居中的話用Absolute就容易出錯，因為網頁一直是隨著分辨率的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會應為分辨率的變化而變化位置。很多人出錯就在于這點上出錯。而網頁居左其特性與Relative很相似，但是還是有本質的區(qū)別的。
Relative，CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區(qū)的原始點進行定位。
有時我們還需要依靠z-index來設定容器的上下關系，數值越大越在最上面，數值范圍是自然數。當然有一點要注意，父子關系是無法用z-index來設定上下關系的，一定是子級在上父級在下。
相關文章
使用CSS解決文字環(huán)繞圖片問題的代碼...2007-12-12
越發(fā)感覺網頁設計人員的辛苦，就一個自動換行，2008-08-08
CSS中幾種常見的注釋...2007-05-05
我們在做表單的情況下，input、textarea、button的樣式比較容易定義，select和input file的樣式難以定義。2008-11-11
CSS 規(guī)則的優(yōu)先級是Web前端開發(fā)人員必須理解的一個概念，我們常用的添加樣式的方法有4種。2008-04-04
Zen Coding css,html縮寫替換大觀 快速寫出html,css
本文是在zen使用生產中遇到的問題做一些分享。2011-01-01
總結下清除浮動的一般解決方案,做網頁時要注意2008-03-03
昨夜與群友討論圖片垂直居中時,突然想到與這很相像的DIV垂直居中效果.raozou分享了他的效果代碼,今將其整理,特貼下來大家一起分享2008-07-07
現在發(fā)現有些人的css寫得很亂 從上到下,那些標記只有他自己看得懂,css在哪里,2008-07-07
CSS3是現代Web開發(fā)中不可缺少的技術,提供豐富視覺效果和布局能力,CSS3引入新選擇器、媒體查詢、漸變、陰影、過渡和動畫等特性,支持響應式設計和用戶體驗優(yōu)化,兼容性和性能仍是挑戰(zhàn),未來將結合JavaScript實現更互動的效果2024-11-11