定位

文檔流

文檔流，是指盒子按照html標(biāo)簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫的先排列，后寫的排在后面，每個(gè)盒子都占據(jù)自己的位置。

關(guān)于定位

我們可以使用css的position屬性來設(shè)置元素的定位類型，postion的設(shè)置項(xiàng)如下：

relative 生成相對(duì)定位元素，元素所占據(jù)的文檔流的位置保留，元素本身相對(duì)自身原位置進(jìn)行偏移。

absolute 生成絕對(duì)定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于上一個(gè)設(shè)置了定位的父級(jí)元素來進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位。

fixed 生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于瀏覽器窗口進(jìn)行定位。

static 默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中，相當(dāng)于取消定位屬性或者不設(shè)置定位屬性。

inherit 從父元素繼承 position 屬性的值。

定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設(shè)置相對(duì)于參照元素的偏移值。

定位元素層級(jí)

定位元素是浮動(dòng)的正常的文檔流之上的，可以用z-index屬性來設(shè)置元素的層級(jí)

偽代碼如下:

.box01{
 ......
 position:absolute; /* 設(shè)置了絕對(duì)定位 */
 left:200px; /* 相對(duì)于參照元素左邊向右偏移200px */
 top:100px; /* 相對(duì)于參照元素頂部向下偏移100px */
 z-index:10 /* 將元素層級(jí)設(shè)置為10 */
}

定位元素特性

絕對(duì)定位和固定定位的塊元素和行內(nèi)元素會(huì)自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素

理解練習(xí)

1、制作如下布局：

2、固定在頂部的水平居中的菜單

3、相對(duì)于瀏覽器窗口水平垂直居中的彈框