position 的屬性有哪些，區(qū)別是什么？

position 有以下屬性值：

absolute：生成絕對定位的元素，相對于 static 定位以外的一個父元素進(jìn)行定位。元素的位置通過 left、top、right、bottom 屬性進(jìn)行規(guī)定。

relative：生成相對定位的元素，相對于其原來的位置進(jìn)行定位。元素的位置通過 left、top、right、bottom 屬性進(jìn)行規(guī)定。

fixed：生成絕對定位的元素，指定元素相對于屏幕視?（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變，?如回到頂部的按鈕?般都是?此定位?式。

static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中，會忽略 top, bottom, left, right 或者 z-index 聲明，塊級元素從上往下縱向排布，?級元素從左向右排列。

inherit：規(guī)定從父元素繼承 position 屬性的值

前面三者的定位方式如下：

relative： 元素的定位永遠(yuǎn)是相對于元素自身位置的，和其他元素沒關(guān)系，也不會影響其他元素。

fixed： 元素的定位是相對于 window （或者 iframe）邊界的，和其他元素沒有關(guān)系。但是它具有破壞性，會導(dǎo)致其他元素位置的變化。

absolute： 元素的定位相對于前兩者要復(fù)雜許多。如果為 absolute 設(shè)置了 top、left，瀏覽器會根據(jù)什么去確定它的縱向和橫向的偏移量呢？答案是瀏覽器會遞歸查找該元素的所有父元素，如果找到一個設(shè)置了position:relative/absolute/fixed的元素，就以該元素為基準(zhǔn)定位，如果沒找到，就以瀏覽器邊界定位。如下兩個圖所示：