很多朋友問過我absolute與relative怎麼區分，怎麼用？我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什麼意思呢？絕對是什麼地方的絕對，相對又是相對於什麼地方而言的呢？那他們又有什麼樣的特性，可以做出什麼樣的效果呢？關於兩者之間又有什麼樣的技巧呢？下面我們就來一一解讀。
absolute，css中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合top、right、bottom、left(下面簡稱trbl)進行定位，在沒有設定trbl，預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由trbl決定。
一般來講，網頁居中的話用absolute就容易出錯，因為網頁一直是隨著解析度的大小自動適應的，而absolute則會以瀏覽器的左上角為原始點，不會應為解析度的變化而變化位置。很多人出錯就在於這點上出錯。而網頁居左其特性與relative很相似，但是還是有本質的區別的。
relative，css中的寫法是：position:relative; 他的意思是相對定位，他是參照父級的原始點為原始點，無父級則以文字流的順序在上乙個元素的底部為原始點，配合trbl進行定位，當父級內有padding等css屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
有時我們還需要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是自然數。但是z-index也不是萬能的，z-index也受到了等級的限制，關於這個等級的限制請檢視《無法衝破的等級
》
例項演示div css的絕對定位和相對定位
概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。說明 佔位空間 元素在文件流中所佔據的空間。物理空間 元素本身所佔據的空間。下面...
例項演示div css的絕對定位和相對定位布
概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。本文的示例，請看這個附件demo。說明 佔位空間 元素在文件流中所佔據的空間。物...
絕對定位和相對定位
換了乙個新工作，一上來就是改前台web頁面之類的東西，工作這麼久以來web css之類的只是皮毛級應用，知之勝少，搞乙個css定位之類的東西還讓我費了好大一番勁，丟人啊。研究了以下，稍微總結一下吧。絕對定位和相對定位 這裡以div容器為例 1 相對定位 元素框偏移某個距離。元素仍保持其未定位前的形狀...