css 深刻淺出定位

前面咱們簡單的瞭解了盒子模型,這裏咱們就不復習了哈。有什麼不清楚的去看個人上一篇博文。其實說定位以前你們必定要先理解一個東西：文檔流，那什麼是文檔流？和文檔有關係嗎？是dom樹嗎？

這一對的問題咱們應該怎麼解決。尚未開始定位啊......應該怎麼辦了？

文檔流：其實文檔你們知道嗎？若是是

你們看看這個東西其餘他就是一個普通流。HTML裏面的寫法就是從上到下，從左到右的排版佈局。每一個非浮動塊級元素都獨佔一行，從上到下排列， 內聯元素則從左到右排列。若是當前行不能排列下來，則另外一起一行而後浮動排列。你們知道文檔流後對於後面的定位可能理解起來就更容易。

相對定位：相對定位是一個很是容易掌握的概念。若是對一個元素進行相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。

其實咱們發現任何的變化？你說這個有什麼意思啊？若是咱們設置了left

我去發生變化了啊。好開心？咱們完成可使用這個來進行tab菜單的居中。好開心。他脫離了文檔流？大家看出來他脫出文檔流了嗎？回答確定是沒有，徹底不知這個是什麼東西啊。這個是什麼東西。還有相對定位是怎麼相對的，這個對象是什麼？（相對定位就是相對於他原來的位置）還有就是爲何第三個div沒有發生變化。按照道理來講他應該替換原來的東西。怎麼沒有？如今就到咱們重點要相對定位的特色：relative會致使自身位置的相對變化，而不會影響其餘元素的位置、大小的變化。這是relative的要點之一。還有第二個要點，就是relative產生一個新的定位上下文。

定位上下文？

其實就是總結爲一句話：relative元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

絕對定位：絕對定位使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

特色：absolute元素脫離了文檔結構。和relative不一樣，其餘三個元素的位置從新排列了。只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌。（此時你應該能馬上想起來，float元素也會脫離文檔結構）雖然absolute元素脫離了文檔結構，可是它的位置並無發生變化，仍是老老實實的呆在它本來的位置，由於咱們此時沒有設置top、left的值。absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容。最後，經過給absolute元素設置top、left值，可自定義其內容，這個都是平時比較經常使用的了。這裏須要注意的是，設置了top、left值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位。

這個裏面須要注意一點的就是 ：absolute的定位相對於前二者要複雜許多。若是爲absolute設置了top、left，瀏覽器會根據什麼去肯定它的縱向和橫向的偏移量，答案是瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。一句話就是找他爸是有（position:relative/absolute/fixed)的元素

參看：http://www.w3school.com.cn/css/css_positioning_absolute.asp

http://www.cnblogs.com/wangfupeng1988/p/4322680.html