CSS中的定位模式規定了一個盒子在總體的布局上應該處于什么位置以及對周圍的盒子會有什么影響。該模式包括了常規文檔流，浮動，和幾種類型的 position 定位的元素。
其中，CSS position 屬性可以取5種值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
static 是 position 默認的屬性值。任何應用了 position:static 的元素都處于常規文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。
一個 static 定位的元素會忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用這五個屬性，你需要先為它的 position 屬性應用這三個值的其中之一： absolute，relative，fixed
position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素會繼承父元素的 position 值。
為了后面能更好地理解，先特將此例的DOM草圖畫出來：
上面的DOM圖，我想大家一定非常容易的理解，下面就一起來主要看position的使用。
第一步：position: static
在CSS中所有元素的“position”屬性的默認值都是“static”，因為不需要顯式的為每個元素設置“position:static”。此時大家會問，那這個屬性值是不是沒有任何意義呢？其實不是的，他在CSS中也會起著很大的作用。我們來看一個實例：
比如說你的兩個頁面，同時存在“div#div-1”，那么此時你在A面中需要對“div#div-1”進行絕對定位；而在B頁面中“div#div-1”又不需要進行絕對定位。
A頁面中“div#div-1”絕對定位：
此時在B頁面中不想在進行絕對定位，那么我們就必須在你的樣式中顯式的重新設置“#div-1”的postion屬性為“static”
第二步：相對定位position:relative
relative稱為相對定位，如果你給某個元素指定了postion的值為“relative”，那么你就可以通過“T-R-B-L”(也就是top,right,bottom,left)來設置元素的定位值。
使用relative時有幾點需要注意：
元素設置了relative時，是相對于元素本身位置進行定位；
新聞熱點
疑難解答
