在CSS中有這樣的一個指令：(position)，在DreamWeaver中文版中翻譯為“定位”，常用的屬性有兩個：relative(相對)與 absolute(絕對)。有很多朋友對這條指令的用法還是不清楚，今天洛壹網(wǎng)絡在這里做一些簡單的講解。

相對定位（relative）

relative：對象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

就是說定位為relative的元素脫離正常的文檔流，但其在文檔流中的位置依然存在。

它是默認參照父級的原始點為原始點，無父級則以文本流的順序在上一個元素的底部為原始點，配合top,left,right,bottom進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區(qū)的原始點進行定位，有以下屬性：

1)如果沒有top,left,right,bottom，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角，如果在沒有父級元素的情況下，存在文本，則以文本的底部為原始點進行定位并將文字斷開。

2)如果設定top,left,right,bottom，并且父級沒有設定position屬性，仍舊以父級的左上角為原點進行定位。

3)如果設定top,left,right,bottom，并且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置 由top,left,right,bottom決定。如果父級有Padding屬性，那么就以內容區(qū)域的左上角為原點，進行定位。

以上三點可以總結出， 無論父級存在不存在，無論有沒有top,left,right,bottom，均是以父級的左上角進行定位，但是父級的Padding屬性會對其影響。 

絕對定位（absolute）

定位為absolute的元素脫離正常文本流，但與relative的區(qū)別是其在文檔流的位置不再存在。

使用left，right，top， bottom等屬性相對于其最接近的一個并且有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，即還是遵循HTML定位規(guī)則的，則依據(jù) body 對象左上角作為參考進行定位。

絕對定位對象可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數(shù)，大的在最上面，可以有負值（目前負值FF不支持）。