div css詳解定位與定位應用

引伸閱讀
    * 解讀absolute與relative a>
    * position:relative/absolute無法衝破的等級
    * 對《無法衝破的等級》一文的補充 

定位一直是WEB標準應用中的困難點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那麼定位會讓網頁實現的更加完美。

定位的定義：

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

static 沒有特別的設定，遵循基本的定位規定，不能透過z-index進行層次分級。
relative 不脫離文檔流，參考自身靜態位置透過 top,bottom,left,right 定位，並且可以透過z-index進行層次分級。
absolute 脫離文件流，透過 top,bottom,left,right 定位。選取其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body座標原點定位，可透過z-index進行層次分級。
fixed 固定定位，這裡他所固定的物件是視覺視窗而並非是body或父級元素。可透過z-index進行層次分級。

CSS中定位的層次分級：z-index: auto | namber; 

auto 遵從其父物件的定位
namber  無單位的整數值。可為負數

定位的原則：

可以位移的元素（相對定位）

在本文流中，任何一個元素都被文字流所限制了自身的位置，但是透過CSS我們依然使得這些元素可以改變自己的位置，我們可以透過float讓元素浮動，我們也可以透過margin來讓元素產生位置移動。但事實上那並非是真實的位移，因為，那隻是透過加大margin值來實現的障眼法。而真正意義上的位移是透過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產生的。

並且我們注意，定位元素的座標點是在margin值的左上邊緣點，即圖中的B點。那麼所有的位移的計算將以這個點為基礎進行元素的推動。當TRBL為正值時位移的方向是內聚的。由此可推，當TRBL為負值時位移的方向是外放的。圖片中有位移的箭頭指向標識，加號的是正值位移方向，有減號的是負值位移方向。關於位移方位，可以延伸閱讀懌飛的《由淺入深漫談margin屬性（一）》

可以在任一位置的元素（絕對定位）

如上所述：相對定位只可以在文字流中進行位置的上下左右的移動，同樣存在一定的局限性，雖然他的表現區脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文字流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文字流，而且在文字流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠裡的職位，如果有一個工人走了自然會要有別的工人來填滿這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以透過TRBL來設定元素，使之處在任何一個位置。當父層position屬性為預設值時，TRBL的座標原點以body的座標原點為起始。

被關聯的絕對定位

上面所說的是單一的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的座標原點可以固定在網頁中的某一個點，當這個點被移動時絕對位定元素能保證相對於這個原坐標的相對位置。也就是說需要這個絕對定位要跟著網頁移動，而並且是因定在網頁的某一個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設定為相對定位或是絕對定位。那麼絕對定位的座標就會以父級為座標起始點。

雖然是如此，但是這個座標原點卻並不是父級的座標原點，這是一個很奇怪的座標位置。

總是視線中的元素（固定定位）

由於廣告的濫用，使得一些瀏覽器軟體都開始有了廣告內容攔截，使得一些很好的效果現在都不建議使用了。例如讓一個元素可能隨著網頁的滾動而不斷改變自己的位置。而現在我可以透過CSS中的一個定位屬性來實現這樣的一個效果，這個元素屬性就是曾經不被支持的position:fixed; 他的意思就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。

雖然原來的瀏覽器並不支援過個屬性，但是瀏覽器的發展使得現在的高級瀏覽器都可以正確的解析這個CSS屬性。並且透過CSS HACK來讓IE6都可以達到這樣的效果（目前無法使IE5.x）達到這種效果。為了不讓本文變成冗長的大論，這裡只給這個實例算是這篇文章的結尾。關於這個實例的一些問題大家可以自行分析。有不懂的地方可以留言給我！