詳解css定位與定位應用

　　定位一直是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可以折分使用。）針對一個相對定位的元素所產生的。我們看下面的圖：

　　

　　我們看圖中是一個寬度為200px，高度為50px，margin:25px; border:25px solid #333; padding:25px; 相對定位的元素，並且位移距上50px，距左50px。而下方是一塊預設定位的黑色區塊。我們看到這個處在文字資料流的區塊被上面的相對定位擋住了一部分，這說明：“當元素被設定相對定位或是絕對位置後，將自動產生層疊，他們的層疊層級自然的高於文字資料流”。除非設定其z-index值為負值，但是在 Firefox等瀏覽器中z-index為負值時將不會顯示。並且我們發現當相對定位元素進行位移後，表現內容已經脫離了文字資料流，只是在本文流中還為原來的相對對定位留下了原有的總寬與總高（內容的高度或是寬度加上marginorderpadding的數值）。這說明在相對定位中，雖然表現區脫離了原來的文字資料流，但是在文字資料流中還還有此相對定位的老窩。這點要特別注意，因為在實際應用中如果相對定位的位移數值過大，那麼原有的地區就會形成一塊空白。

[1] [2]  下一頁