css定位機制（布局）

標籤：一個   區塊層級元素   部分   矩形   類型   文檔流   osi   absolute   定位   

css定位機制由三種：普通文檔流、定位、浮動。

1，普通文檔流：區塊層級元素從上往下排列，行級元素從左至右排列。

 

2，定位：position屬性可以對元素進行定位，有四個類型，static,relative,absolute,fixed

static：元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative：當設定了位移值之後，元素相對於自身進行位移，仍舊保持未位移前的形狀，但是它依然保留原來所佔空間。

absolute：元素定位後產生一個塊級框，並從文檔流中完全刪除，不再占空間，位移是相對離它最近的一個已經定位過的祖先元素，如果沒有，則是body。

fixed：元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

 

3，浮動：元素設定float屬性可以向左或右浮動，脫離裡普通文檔流，不佔據空間。卻是佔據視圖位置，會擋住在他下面的元素。浮動元素會產生一個塊級框，而不論它本身是何種元素。

 

css定位機制（布局）