各個(gè)屬性值的定義：

1、static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

2、relative：生成相對(duì)定位的元素，通過top,bottom,left,right的設(shè)置相對(duì)于其正常位置進(jìn)行定位。可通過z-index進(jìn)行層次分級(jí)。

3、absolute：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。可通過z-index進(jìn)行層次分級(jí)。

4、fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。可通過z-index進(jìn)行層次分級(jí)。

?

relative與absolute的主要區(qū)別：

首先，是上面已經(jīng)提到過的在正常流中的位置存在與否。

其次，relative定位的層總是相對(duì)于其最近的父元素，無論其父元素是何種定位方式。如圖3：

圖中，紅色背景層為relative定位，其直接父元素綠色背景層為默認(rèn)的static定位。紅色背景層的位置為相對(duì)綠色背景層top、left個(gè)20元素。而如果紅色背景層定位為absolute，則情形如圖4：

?

?

可以看到，紅色背景層依然定義top:20px；left:20px；但其相對(duì)的元素變?yōu)槎ㄎ环绞綖閍bsolute或relative的黃色背景層。

因此，對(duì)于absolute定位的層總是相對(duì)于其最近的定義為absolute或relative的父層，而這個(gè)父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對(duì)body進(jìn)行定位，如圖5：

?

?

除top、left、right、bottom定位外，margin屬性值的定義也符合上述規(guī)則。

總結(jié)

以上是生活随笔為你收集整理的CSS+DIV定位分析(relative,absolute,static,fixed)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。