1胖喳,static(默認)
當你沒有為一個元素(例如div)指定定位方式時熄捍,默認為static,也就是按照文檔的流式(flow)定位岛宦,將元素放到一個合適的地方。所以在不同的分辨率下耍缴,采用流式定位能很好的自適合砾肺,取得相對較好的布局效果。
一般來說防嗡,我們不需要指明當前元素的定位方式是static——因為這是默認的定位方式变汪。除非你想覆蓋從父元素繼承來的定位系統(tǒng)。
left,top屬性對static沒有效果蚁趁,static是靠margin這些定位的裙盾。
2,relative(相對定位)
在static的基礎上,如果我想讓一個元素在他本來的位置做一些調整(位移)闷煤,我們可以將該元素定位設置為relative童芹,同時指定相對位移(利用top,bottom,left,right)。
有一點需要注意的是鲤拿,相對定位的元素仍然在文檔流中
,仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了署咽。
3近顷,absolute(絕對定位)
如果你想在一個文檔(Document)中將一個元素放至指定位置,你可以使用absolute來定位宁否,將該元素的position設置為absolute窒升,同時使用top,bottom,left,right來定位。
如果沒有父元素慕匠,位置是相對于body來進行的饱须。
絕對定位會使元素從文檔流中被刪除
,結果就是該元素原本占據(jù)的空間被其它元素所填充台谊。
4蓉媳,mix relative and absolute(混合相對定位和絕對定位)
如果對一個父元素設置relative,而對它的一個子元素設置absolute锅铅,
則子元素的絕對定位的參照物為父元素
酪呻。
利用混合定位,我們可以用類似下面的css來實現(xiàn)兩列(Two Column)定位
5, fixed(固定定位)
我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”盐须,那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)玩荠,怎么辦呢?
答案是使用fixed定位贼邓,fixed定位的參照物總是當前的文檔阶冈。利用fixed定位,我們很容易讓一個div定位在瀏覽器文檔的左上塑径,右上等方位女坑。比如你想添加一個信息提示的div,并將該div固定在右上方.
6,float(浮動)
對于浮動晓勇,需要了解的是:
*浮動會將元素從文檔流中刪除堂飞,他的空間會被其它元素補上。
*浮動的參數(shù)物是父元素绑咱,是在父元素這個容器中飄绰筛。
*為了清除浮動造成的對浮動元素之后元素的影響,我們在浮動元素之后加一個div描融,并將這個div的clear設置為both铝噩。
*如果兩個元素都設置了浮動,則兩個元素并不會重疊窿克,第一個元素占據(jù)一定空間骏庸,第二個元素緊跟其后毛甲。如果不想讓第二個元素緊跟其后,可以對第二個浮動的元素使用clear具被。