CSS2.0中的定位確實有時會把人弄糊塗，所以今天給它記下來，同時供以后查閱。下面寫的內容有一部分借鑒了w3cschool和divcss5這兩個官方網站，在此處特別的說明一下
CSS2.0中position主要用於HTML元素的定位，在實際設計中還是非常有用的。但是對於學習者來說都會遇到相對定位和絕對定位到底如何使用，非常打腦殼
不管再咋個打腦殼，大家首要的還是記住position的幾個屬性值
- static: HTML元素的默認定位方式
- absolute: 將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>
- relative: 對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置
- fixed: 元素的位置相對於瀏覽器窗口是固定位置, 即使窗口是滾動的它也不會移動
因為static和fixed比較簡單，所以下面的案例我們來介紹一個relative和absolute這個兩個屬性。先看一個案例截圖
上面截圖由3個div組成，外層div名稱為scroll，第2個div的名稱為sub，第3個div的名稱為ssub。現在我就來告訴大家如何使用position中absolute和relative
記住如下的口訣
- 絕對定位（absolute）位置是相對最近已經定位的父元素，如果父元素本身沒有使用position定位，則相對於文檔（html）定位
- 絕對定位使用通常是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，並且子級使用left或right和top或bottom進行絕對定位
案例代碼
<!DOCTYPE html> <html> <head> <style> div.scroll /*父級元素,注意使用了relative*/ { background-color:#00FFFF; width:350px; height:350px; position: relative; } div.sub { /*第2個子級元素*/ width:200px; height: 200px; border: 1px solid red; position: absolute; left: 10px; top: 10px; } div.ssub{ /*最里層的元素*/ width:100px; height: 100px; border: 1px solid red; position: absolute; left: 10px; top: 10px; } </style> </head> <body> <div class="scroll"> <div class="sub"> <div class="ssub"></div> </div> </div> </body> </html>
CSS定位總結（來自divcss5官方網站的總結，本人覺得非常好，就記下來）。多謝divccs5，http://www.divcss5.com/rumen/r403.shtml
通常我們使用position:absolute；position:relative進行絕對定位布局，通過CSS進行定義定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute進行定位，同時不要忘記使用left、right、top、bottom的配合定位具體位置。絕對定位如果父級不使用position:relative，而直接使用position:absolute絕對定位，這個時候將會以body標簽為父級，使用position:absolute定義對象無論位於DIV多少層結構，都將會被拖出以<body>為父級（參考級）進行絕對定位。絕對定位非常好用，但切記不要濫用，什么地方都用，這樣有時會懶得計算距離上、下、左、右間距，同時可能會造成CSS代碼臃腫
在絕對定位時候我們可以使用css z-index定義css層重疊順序。同時left、right、bottom、top的數值，可以使用（Photoshop）PS切片工具獲取准確的數值。