細說CSS樣式表中的position屬性

在CSS中關於position定位的內容是：
position: relative | absolute | static | fixed

 

static(靜態) 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。

 

relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。

 

absolute(絕對位置) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設定的父級對象進行絕對位置，如果對象的父級沒有設定定位屬性，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。

 

fixed(固定定位)這裡所固定的參照對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。

CSS中定位的層疊分級：z-index: auto | namber;
    auto 遵從其父物件的定位
    namber  無單位的整數值。可為負數

relative(相對定位)只可以在文字資料流中進行位置的上下左右的移動，雖然他的表現區脫離了文字資料流，但是在文字資料流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。這樣很明顯就會空出一塊空白來，如果希望文字資料流拋棄這個部分就需要用到絕對位置。

 

absolute(絕對位置)不光脫離了文字資料流，而且在文字資料流中也不會給這個絕對位置元素留下專屬空位。這就好比是一個工廠裡的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對位置將可以通過TRBL(TOP、RIGHT、BOTTOM、LEFT簡稱TRBL)來設定元素，使之處在任何一個位置。在父層position屬性為預設值時，TRBL的座標原點以body的座標原點為起始。