定位一直是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為負值時將不會顯示。並且我們發現當相對定位元素進行位移後，表現內容已經脫離了文字流，只是在本文流中還為原來 的相對定位留下了原有的總寬與總高（內容的高度或是寬度加上margin/border/padding的數值）。這說明在相對定位中，雖然表現區脫離了 原來的文字流，但是在文字流中還還有此相對定位的老窩。這點要特別注意，因為在實際應用中如果相對定位的位移數值過大，那麼原有的區域就會形成一塊空白。
並 且我們注意，定位元素的座標點是在margin值的左上邊緣點，即圖中的b點。那麼所有的位移的計算將以這個點為基礎進行元素的推動。當trbl為正值時 位移的方向是內聚的，由些可推，當trbl為負值時位移的方向是外放的。在有位移的箭頭指向標識，帶有加號的是正值位移方向，帶有減號的是負值位移方 向。關於位移方位，可以延伸閱讀懌飛的《由淺入深漫談margin屬性（一）》
可以在任意乙個位置的元素 （絕對定位）
如 上所述：相對定位只可以在文字流中進行位置的上下左右的移動，同樣存在一定的侷限性，雖然他的表現區脫離了文字流，但是在文字流卻依然為其保留了一席之 地，這就好比乙個打工的人他到了外地，但是在老家依然有乙個專屬於他的位置，這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來，如果希望文 本流拋棄這個部分就需要用到絕對定位，絕對定位不光脫離了文字流，而且在文字流中也不會給這個絕對定位元素留下專屬空位，這就好比是乙個工廠裡的工人，如 果有乙個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過trbl來設定元素處在任何乙個位置。在 父層position屬性為預設值時，trbl的座標原點以body的座標原點為起始。看下圖：
上圖可知，文字流中的內容會頂替絕對定位無素的位置，一點都不會客氣。而絕對定位元素自然的層疊於文字流之上。而在單一的絕對定位中，定位元素將會跑到網頁的左上角，因為那裡是他們的被絕對定位後的座標原點。
被關聯的絕對定位
上 面說的是單一的絕對定位，而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性，但是又希望絕對定位的座標原點可以固定 在網頁中的某乙個點，當這個點被移動時絕對位定元素希望能保證相對於這個原座標的相對位置。也就是說需要這個絕對定位要跟著網頁移動，而並且是因定在網頁 的某乙個固定位置。通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設定為相對定位。那麼絕對定 位的座標就會以父級為座標起始點。
雖然是如此，但是這個座標原點卻並不是父級的座標原點，這是乙個很奇怪的座標位置。我們看一下模型圖示：
我 們看到，這個圖中父級為黑灰色區塊，子級為青色區塊。父級是相對定位，子級是絕對定位。子級設定了頂部位移50個畫素，左傾位移50個畫素。那麼我們看， 子級的座標原點並不是從父級的座標原點位移50個畫素，而是從父級塊的padding左上邊緣點為座標起始點（即a點）。而父級這裡如果要產生位置移動， 或是瀏覽器視窗大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。
這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話，相信看完對這裡對定位的解釋一定可以把定位使用得隨心所欲。
總在視線裡的元素 （固定定位）
由 於廣告的濫用，使得一些瀏覽器軟體都開始有了廣告內容攔截，使得一些很好的效果現在都不推薦使用了。比如讓乙個元素可能隨著網頁的滾動而不斷改變自己在瀏 覽器的位置。而現在我可以通過css中的乙個定位屬性來實現這樣的乙個效果，這個元素屬性就是曾經不被支援的position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某乙個位置，而固定定位則是固定在瀏覽器的視框位置。
定位應用
詳解定位與定位應用
定位一直是web標準應用中的難點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 靜態 沒有...
詳解css 定位與定位應用
原文 定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 不脫離文件流，參考自身靜態位置通過 top,bottom,left,r...
詳解網頁設計中的定位與定位應用
定位一直是web標準應用中的難點，如果理不清楚定位那麼可能應實現的 效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。定位的定義 在css 中關於定位的內容是 position relative absolute static fixed static 沒有特...