position 屬性規(guī)定元素的定位類型。

position 有四個(gè)屬性值：static（默認(rèn)值）、relative（相對(duì)定位）、absolute和fixed（統(tǒng)稱為絕對(duì)定位）。

• static，沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top、bottom、left、right 或者是 z-index 聲明）。

• relative，生成相對(duì)定位的元素，相對(duì)于原來(lái)位置移動(dòng)，元素設(shè)置屬性之后會(huì)出在文檔流中不影響其他元素的布局。

• absolute，生成絕對(duì)定位的元素，相對(duì)于static 定位以外的第一個(gè)父元素進(jìn)行定位，元素會(huì)脫離文檔流，如果設(shè)置偏移量會(huì)影響其他元素的位置定位。

• fixed，生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

下面的同一段代碼，這是position的屬性值的不同，那么相對(duì)應(yīng)的瀏覽器的顯示結(jié)果也是不一樣的。

當(dāng)position屬性值為absolute和fixed時(shí)：

absolute_fixed.png

當(dāng)position屬性值為relative時(shí)：

relative.png

當(dāng)position屬性值為默認(rèn)值static時(shí)：

static.png

基本上用的比較多的就是 relative 和 absolute 這兩個(gè)屬性，前者定位是相對(duì)自身位置定位，后者是相對(duì)于離元素最近的設(shè)置了絕對(duì)或相對(duì)定位的父元素決定的，如果沒(méi)有父元素設(shè)置絕對(duì)或相對(duì)定位，那么元素相對(duì)于根元素也就是html元素定位。