在看這篇文章是，希望大家對css盒式模型有所了解，不清楚的點這裡。
一．定位概述
在說明定位問題前，我們先聊聊div這個元素。通常我們把p、h1或div元素常常稱為塊級元素。這意味著這些元素顯示為一塊內容，即「塊框」，塊框從上到下乙個接乙個地垂直排列。與之相反，strong和span等元素稱為行內元素，因為它們的內容顯示在行中，即「行內框」，行內框在一行中水平排列。
通過上面我們了解到是乙個塊級元素。這意味著它的內容自動地開始乙個新行。實際上，換行是 固有的唯一格式表現。可以通過 的 class 或 id 應用額外的樣式。可以使用display屬性來改變。
css中有三種基本的地位機制：普通流、浮動和絕對定位。除非特別指定，否則所有框都在普通流中定義。顧名思義，普通流中元素框的位置由元素在html中的位置決定的。
說了這麼多了，那麼我們現在進入進入正題。
二．相對定位
相對定位是比較簡單的，但是要弄清概念，最好自己實踐。
相對定位的元素仍然屬於普通流。也就是說相對定位是在它原來的位置上進行偏移。可以通過設定top、left的畫素值來達到偏移的目的。在使用相對定位時，無論是否移動，元素仍然占有原來的空間。也就是說其他元素會表現得該元素沒有移動似的。但是，有一點，要注意，相對定位後，可能會導致它覆蓋其他的元素。下面通過示例來講解。
示例html**：
#c1
#c2#c3
相對定位後的css**，我們只要稍微修改下c2就行了，其它一樣，**如下：
#c2三．絕對定位
相對定位被看作普通流定位的一部分。與之相反，絕對定位於文件流無關，因此，不占有普通流的空間。普通流文件流中的元素就當絕對定位的元素不存在一樣，但是絕對定位的元素也有可能會覆蓋其他元素。但是我們可以通過設定z-index屬性來控制這些覆蓋，z-index屬性越高，框越能夠顯示在前面。這個z-index屬性只是針對於絕對定位元素來設定的，不是絕對定位的元素，設定無效的，這是我實驗得到的結果，如果有哪位實驗不是這個結果，請告知我，謝謝。
知道了絕對定位是脫離普通文件流，那麼它是針對誰絕對定位呢？絕對定位元素的位置是相對於距離它最近的那個已經定位的祖先元素來確定的。如果元素沒有已經確定的祖先元素，那麼它的位置是相對於初始包含塊的。
與相對定位一樣，絕對定位的框可以通過top、left、right、bottom這四個來設定的，你可以直接把元素定位在也沒上的任何位置。
下面通過示例來闡述。
正常絕對定位**，顯示後如圖2左面所示：
#c1
#c2#c3
四．固定定位
固定定位是絕對定位的一種。差異是固定定位的定位塊會一直出現在視窗上，大家可以檢視看優酷**最上面的那個搜尋欄就知道什麼事固定定位了。
五．浮動
浮動定位是定位中比較難的。浮動是指框可以左右移動，直到它碰到包含框或另乙個浮動框的邊緣的邊緣。因此浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動不存在一樣，但是這句話也不絕對對，下面就幾種情況分別在不同的瀏覽器中的表現。進行討論。
示例html**：
p1
p2p3
#p1
#p2
#p3
1. p1普通流，p2普通流
2. p1浮動，p2普通流
3. p1普通流，p2浮動
4. p1浮動，p2浮動
第一種情況p1普通流，p2普通流，也就是大家都不浮動，在ie,chrome,firefox中表現一樣，如下圖3所示：
第二種情況p1浮動，p2普通流，在ie中顯示如圖5，在chrome,firefox中顯示如圖4所示：
第三種情況p1普通流，p2浮動，在三種瀏覽器都顯示如圖6所示：
第四種情況p1浮動，p2浮動，在三種瀏覽器都顯示如圖7所示：
從上面四種情況，我們可以總結出，假設該元素浮動是向左的。如果都不浮動，那麼它們是垂直排列的。如果乙個元素前面有不浮動的塊元素的話，它是從下一行開始浮動的，從情況2中我們可以看出，當然在ie中稍微不一樣，它是接著後面顯示的。如果乙個元素後面有不浮動的元素的話，會當它不存在一樣，這個我們從情況3可以看出。大家都浮動的話，順序排列，如果一行顯示不下的話，會自動到下一行顯示。如圖8所示。如果浮動元素的高度不一樣的話，那麼他們下移會「卡住」。如圖9所示。那麼到這裡我們基本講解了浮動大多數東西，還有行框的清理等，由於自己沒太搞清楚，所以就不獻醜了。
CSS 定位問題
top bottom left right top right bottom left應用於定位元素，position屬性設定後。top right bottom left的值設定為正值時，元素向內收縮，設定為負值時，向外擴張 偏移屬性定義了距離包含塊相應邊的偏移，而不是距離包含塊左上角的偏移。ca...
css定位問題
在進行頁面布局的時候，我們會用到定位，用於將元素放置在我們想要 ue原型圖或者ui設計稿 的位置，達到設計要求。定位的4個關鍵字，分別是static 靜態的，預設是這個屬性 fixed 固定的 absolute 絕對的 以及relative 相對的 不會脫離正常文件流的定位屬性有 static和re...
css定位z index問題
1.某些瀏覽器下元素層級遮蓋存在bug 2.某個元素z index設的太大，導致始終無法被遮蓋 3.js動態計算z index，導致元素覆蓋關係部可控 層級遮蓋bug出現的原因 ie6 7對z index的表現跟ie8及以上瀏覽器不一致。position值為非static時，如果不設定z index...