一、簡介
absolute是絕對定位，relative是相對定位，配合TOP、RIGHT、BOTTOM、LEFT進行使用
二、實例
1、relative
相對誰來定位？相對自己未定位前的位置來定位
<style type="text/css"> .first{ width:200px; height: 50px; margin:25px; border:25px solid #FFD204; padding:25px; position:relative; top: 25px; left: 25px; } .second { width:200px; height: 50px; margin-top: -175px; margin-left: 25px; border:25px solid #ff442a; padding:25px; background-color:#333; } </style> <body> <div> <div class="first"></div> <div class="second"></div> </div>
紅色的我通過css將其調到黃色未使用relative時的位置，這裏我們看到
黃色在使用position：relative後 相對定位後正好相對自己本身的位置 向左向下偏移25px
因爲我將方塊的border正好設爲25px
這裏我們看到剛好偏移黃色邊框大小的位置
2、absolute（相對第一個父元素來定位，並貢獻自己的位子）
<style type="text/css"> body{ margin: 0px; } .te{ border:25px solid #3bc8ff; width: 100%; height: 100%; margin: 25px; } .first{ width:200px; height: 50px; margin:25px; border:25px solid #FFD204; padding:25px; position:absolute; top: 25px; left: 25px; z-index: 1; } .second { z-index: 999; } </style> <body> <div class="te"> <div class="first"></div> <div class="second"> 張鑫旭-鑫空間-鑫生活 it's my whole life! 網站首頁 我的微碼 建議反饋 前端技術 css js/jQuery 翻譯 生活與創作 生活 散文 小說 前端在線資源 CSS3參考 jQuery1.4參考 翻頁太辛苦，試試直接搜索 搜索 ► « display:inline-block/text-align:justify下列表的兩端對齊佈局HTML5終極備忘大全（圖片版+文字版） » CSS 相對/絕對(relative/absolute)定位系列（三） 這篇文章發佈於 2011年03月20日，星期日，22:32，歸類於 css相關。 閱讀 92720 次, 今日 26 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1528 //zxx:直接接上回 一、absolute正業之元素隱藏 元素隱藏與顯示是我們在頁面製作與交互效果實現中非常常見的，如果您只是使用display:none與display:block/inline來實現DOM元素的顯隱控制，那你就out了。就元素的顯示與隱藏實現，使用display在有些時候算是比較糟糕的方法了。 控制元素顯隱的方法很多，但是本文不是講元素顯隱控制的，所以，只講與absolute相關的一些方法。 absolute屬性相關的隱藏方法，我知道的有三種，分別如下： .hidden{ position:absolute; top:-9999em; } .hidden{ position:absolute; visibility:hidden; } .hidden{ position:absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } 使用absolute屬性控制DOM元素的顯隱有三個關鍵點：頁面可用性，迴流與渲染，配合JavaScript的控制。 ① 可用性隱藏 所謂可用性隱藏，就是兼顧屏幕閱讀器這類互聯網閱讀輔助設備的隱藏方式。Yahoo! 可用性實驗室成員Ted Drake就不同隱藏方法下屏幕閱讀器的可用性問題作爲測試，結果發現下面兩種隱藏方式屏幕閱讀器是讀不了的。 .completelyhidden { display:none; } .visibilityhidden { visibility:hidden; } You don’t want to show those hidden panels to any user. Use display:none for the hidden panels. Screen readers will also ignore sections with visibility:hidden. 所以，從可用性角度而言，像“選項卡內容”，“更多收起展開”這類元素隱藏與顯示就不推薦使用display:none， 或者是position:absolute + visibility:hidden。 例如優酷網電影或視頻的簡介中“顯示詳情”的實現就是使用的display:none，如下截圖： 優酷網的展開詳情display:none實現 張鑫旭-鑫空間-鑫生活 而大衆點評網的隱藏層多采用position:absolute + visibility:hidden的方法，如下截圖： 大衆點評網隱藏層的實現 張鑫旭-鑫空間-鑫生活 上述隱藏內容其實都是有用的信息，對於像盲人這類需要藉助屏幕閱讀器的用戶無法知道這些信息了。拿優酷的那個例子，盲人用戶就無法知道影片完整的簡介。 如果希望隱藏內容能夠被輔助閱讀設備識別，就不能使用display:none以及visibility:hidden隱藏元素。可以使用模擬隱藏的隱藏方法，又稱可用性隱藏。就是下面兩種隱藏方法。 .hidden{ position:absolute; top:-9999em; } .hidden{ position:absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } 但是，如果你是希望完全隱藏的，那就可以使用display:none或visibility:hidden。 額外說明：如果隱藏元素含有鏈接元素或是可獲得焦點的控件元素，但是又是使用的可用性隱藏。這些隱藏的鏈接與控件也是可以響應鍵盤焦點Tab切換的，但是這會讓鍵盤使用用戶產生不解與疑惑的。所以，從某種意義說，某些情況下，要兼顧屏幕閱讀器用戶和鍵盤用戶有時候是不可兼得的。 ②迴流與渲染 早先時候我曾翻譯過兩篇關於迴流與重繪的文章，“最小化瀏覽器中的迴流(reflow)”以及“迴流與重繪：CSS性能讓JavaScript變慢？”。 我自己是沒測過。不過根據上面這兩篇文章的說法，以及一位口碑前端前輩的說法，使用absolute隱藏於顯示元素是會產生重繪而不會產生強烈的迴流。而使用display:none不僅會重繪，還會產生迴流，DOM影響範圍越廣，迴流越強烈。所以，就JavaScript交互的呈現性能上來講，使用absolute隱藏是要優於display相關隱藏的。 ③配合JavaScript的控制 說到元素的顯示與隱藏，免不了與JavaScript的交互。例如display相關的隱藏於顯示，就是display:block/inline/inline-block/...與display:none。 要讓元素隱藏，很簡單，直接： dom.style.display = "none"; 但是，如果要顯示隱藏的元素，咋辦呢？因爲不同的標籤所處的display水平是不一樣的，於是，我們很難有一個簡單的統一的顯示方法。例如，下面的代碼可能使用於div, p標籤，但是對於span等inline水平的元素，可能就會嗝屁了（原本單行顯示結果換行）。 dom.style.display = "block"; 況且，隨着瀏覽器的不斷進步，以後類似於display:table-cell，display:list-item會越來越多的使用。再想通過display實現通用的顯隱方法難度又會增大些。 這就是使用display屬性控制元素顯隱的侷限性。順帶一提的是jQuery的顯隱方法show()/hide()/toggle()就是基於display的，其會存儲元素先前的display屬性值，於是元素再顯示的時候就可以準確地顯示出之前的display值了。 您可以狠狠地點擊這裏：jQuery與display的顯隱測試 jQuery存儲display數組值 張鑫旭-鑫空間-鑫生活 而使用絕對定位實現的一些元素隱藏方法的控制就相對簡單很多的。例如：position:absolute + visibility:hidden方法，當我們要讓元素（原本非絕對定位元素）顯示的時候，我們需要設置： dom.style.position = "static"; dom.style.visibility = "visible"; 而類似的position:absolute + top:-999em方法，當我們要讓元素（原本非絕對定位元素）顯示的時候，我們只需要設置： dom.style.position = "static"; 而無需擔心原本標籤的是inline水平還是block水平。所以，就顯隱的JavaScript控制上來講，absolute相關方法要比display略勝一籌。 結合上面三點討論，我們可以看出，當前佔據主流的display:block/none控制元素顯示與隱藏的方法其實是諸多方面有弊端的方法，有拿着雞毛當令箭的意味。實際上，這種活（元素顯隱）交給absolute屬性更合適，控制元素顯示與隱藏纔是absolute屬性的正業所在。//zxx: display屬性控制元素顯隱之所以會控制大半壁江山是因爲其語義就是“顯示(display)”，於是先入爲主，再加上人的從衆性。 二、absolute與等高佈局 拿簡單的兩欄佈局舉例，左欄與右欄有不同的背景色，且中間隔邊框線分隔，如何實現？因爲隨着內容的不同，有可能左側欄高度較高，也有可能是右側欄高度較高。所以，要實現無縫的填色，定高不行不通的，置高度不理顯然也不行，此時解決方法就是讓左右兩欄等高。 我較早的時候寫過一篇名爲“純CSS實現側邊欄/分欄高度自動相等”的小tip，其實現原理如下： margin-bottom:-3000px; padding-bottom:3000px; 後來在“我所知道的幾種display:table-cell的應用”一文中也提過使用display:table-cell實現等高佈局。 這裏再介紹些如何使用absolute實現等高佈局。 正如系列前篇所述，應用了position:absolute的元素無寬度，無高度。正好，我們可以利用該特性來實現等高佈局所需要的效果——如等高的背景色、邊框效果等。 您可以狠狠地點擊這裏：絕對定位與等高佈局demo 點擊demo頁面中的兩個按鈕就可以看到無論左側欄高還是右側欄高，兩邊背景顏色純純的，中間的垂直分隔線直直的，如下截圖： 絕對定位等高佈局左側欄高度較高 張鑫旭-鑫空間-鑫生活 絕對定位等高佈局右側欄高度高 張鑫旭-鑫空間-鑫生活 其中，實現等高效果的核心CSS代碼如下： .equal_height{width:100%; height:999em; position:absolute; left:0; top:0;} 同時，滿足以下一些條件： 高度999em的絕對定位層位於側欄容器內，側欄position爲relative 該欄實際元素內容用一個與absolute絕對定位層爲兄弟關係的標籤層包裹，position爲relative，z-index值1或其他 左右欄的父標籤需設置overflow:hidden，同時爲了兼容IE6/7，需設置position爲relative 以上條件對應下圖標註： 絕對定位等高佈局實現條件標註 張鑫旭-鑫空間-鑫生活 原理很簡單：由於絕對定位元素無高度的特性無寬度的特性，我們可以僞造一個高度足夠高的絕對定位層（設置背景色，邊框等屬性），同時設置父標籤溢出隱藏，那麼其多出來的高度酒不會顯示了，也就實現了看上去的等高佈局效果了。具體細節可參見demo頁面中的代碼展示，相信很好理解的。 三、absolute屬性與IE6/IE7之間的誤會 absolute屬性確實存在不少兼容性的問題，首先absolute屬性定位相關(left/top)的些bug（例如IE6的奇偶bug）這裏不予以討論。//zxx:很多人都知道，再說就沒意思了。 所以，下面所展示的些“誤會”都是沒有定位屬性的(即無left/top/right/bottom)。 1. margin定位元素絕對定位元素重疊的誤會 以前經常碰到的，今天怎麼都模擬不出來了，這個先空着，回頭補上…… (*^__^*) 嘻嘻…… 補充於2011-04-18 很簡單，雙欄自適應佈局中，左側元素absolute絕對定位，右側的margin撐開距離定位。可參見“頁面重構鑫三無準則 之無寬度準則”一文中新浪微博的實例頁面中的使用（那裏是padding撐開距離）。 爲了再現IE6/IE7下的這個argin定位元素絕對定位元素重疊的誤會，我特地做了個簡單的demo頁面，您可以狠狠地點擊這裏：IE6/7下margin與absolute元素重疊demo 可以看到在IE6/7下左側應用了absolute屬性的圖片與右邊的自適應的文字內容重疊了，如下圖所示（截自IE7）： IE7下margin元素與absolute元素重疊 張鑫旭-鑫空間-鑫生活 此問題出現的原因與下面浮動與絕對定位元素重疊有着某些類似的原因，因爲問題的出現都與絕對定位元素所在的標籤水平有關：上述demo中，absolute屬性所在的標籤是div標籤，屬於block水平的元素。如下截圖： 使用的div標籤 張鑫旭-鑫空間-鑫生活 要是我們把這裏的block水平的div元素修改成inline水平的span標籤，則重疊的問題就沒有了。如下截圖： span標籤下的重疊問題的修復 張鑫旭-鑫空間-鑫生活 您可以狠狠地點擊這裏：IE6/7下margin與absolute元素重疊問題修復demo 如果您手上的瀏覽器是即使是IE6/IE7，點擊上面的demo頁面也不會有重疊的bug了，而此問題的修復是非常簡單的將div標籤換成span，如下截圖所示： 換成span標籤的示意截圖 張鑫旭-鑫空間-鑫生活 2. 浮動與絕對定位元素重疊的誤會 很簡單，前面一個標籤是浮動元素，後面的是block水平的絕對定位元素，結果IE8+，以及現代瀏覽器文字與圖片重疊；但是IE6/IE7瀏覽器確是並排顯示的。如下截圖示意： IE8下文字與圖片重疊 張鑫旭-鑫空間-鑫生活 IE6下圖文並排 張鑫旭-鑫空間-鑫生活 您可以狠狠地點擊這裏：浮動元素絕對定位元素重疊demo CSS代碼如下： .box{padding:1em; background-color:#f0f3f9; overflow:hidden; _zoom:1;} .l{float:left;} .abs{position:absolute;} HTML代碼如下： <div class="box"> <img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> <div class="abs">呦喝，這不是張含韻小姐嗎？</div> </div> 爲何現代瀏覽器以及IE8+瀏覽器下浮動的圖片與絕對定位的文字會重疊，而IE6/7卻是並列顯示？這是由於IE6/IE7瀏覽器將inline水平標籤元素和block水平的標籤元素沒有加以區分一視同仁渲染了。我在前面已經多次提到，應用了絕對定位屬性的元素具有包裹性，等同於沒有高度與寬度的inline-block元素。 上面斜體加粗的這個結論實際上說得不夠嚴謹，在IE6/IE7瀏覽器下，上面的話是沒錯的；在所有瀏覽器下，對於inline水平的元素，上面的話也是沒錯的；但是在現代瀏覽器下，對於block水平的元素，上面的結論就有商榷之處。實際上，按照正確的絕對定位渲染，像div, p這類block水平標籤並未完全inline-block化。inline-block化的元素有三大特性：包裹性；高寬可定義；圖文混排。然而，div, p這類標籤應用了position:absolute後，在非IE6/7瀏覽器下，只有包裹性和高寬可定義這兩個特性，但並不支持圖片混排，也就是與圖片文字在一起的時候會換行。 下面是舉例字，驗證上面的結論。首先是這麼句話：“對於inline水平的元素，上面的話也是沒錯的”。這句話的意思其實是，如果是inline水平的元素，上面的那個示例就不會有兼容性問題了，於是我們把應用了abs類名的div標籤改成span，如下HTML代碼： <div class="box"> <img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> <span class="abs">呦喝，這不是張含韻小姐嗎？</span> </div> 結果如下圖： IE8下浮動元素與絕對定位元素並排顯示 張鑫旭-鑫空間-鑫生活 不僅IE8瀏覽器，Firefox/Chrome等先前重疊的現在都並排顯示了。 您可以狠狠地點擊這裏：浮動與inline水平絕對定位元素不重疊demo 下面再來驗證這個結論：“現代瀏覽器下block水平元素absolute化後不支持圖片混排”。也是很簡單的，我們可以把最上面重疊的那個例子的圖片的浮動屬性幹掉，也就是如下的HTML代碼： <div class="box"> <img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> <div class="abs">呦喝，這不是張含韻小姐嗎？</div> </div> 結果如下圖： IE8下絕對定位元素與圖片換行 張鑫旭-鑫空間-鑫生活 而在IE6/IE7瀏覽器下，依舊是並排顯示滴，如下圖： IE6/IE7下依舊並排顯示 張鑫旭-鑫空間-鑫生活 OK，現在應該很好理解最上面爲何在現代瀏覽器下圖片文字重疊而IE6/IE7下並排顯示了。 在“CSS float浮動的深入研究、詳解及拓展”系列中多次闡述了浮動元素的“無高度”特性，所以，當圖片應用了float:left屬性後，圖片所佔據的高度丟失，於是，原本換行顯示在下面的文字就提上去了，於是就形成了重疊，如下圖標示： 浮動與絕對定位重疊圖示 張鑫旭-鑫空間-鑫生活 四、下節看點 下篇講relative屬性，內容包括： relative的佔位性； relative最小化影響原則； relative在一些bug中的修復功能； 等…… 時間倉促，資質有限，文章難免有表述不準確或是理解有誤的地方，歡迎指正，不甚感謝。 原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com] 本文地址：http://www.zhangxinxu.com/wordpress/?p=1528 （本篇完）// 想要打賞？點擊這裏。有話要說？點擊這裏。 相關文章 我所知道的幾種display:table-cell的應用 (0.442)小tip: transition與visibility (0.282)CSS 相對/絕對(relative/absolute)定位系列（四） (0.241)css行高line-height的一些深入理解及應用 (0.198)CSS 相對/絕對(relative/absolute)定位系列（二） (0.171)您可能不知道的CSS元素隱藏“失效”以其妙用 (0.171)absolute絕對定位的非絕對定位用法 (0.167)大小不固定的圖片、多行文字的水平垂直居中 (0.123)實驗：absolute/display隱藏與迴流等性能 (0.120)Chrome absolute絕對定位display/visibility渲染bug (0.120)純CSS實現易拉罐3D滾動效果 (RANDOM - 0.023) 分享到： 4 標籤： absolute, float, IE6, IE7, IE8, margin, relative, table-cell, visibility, 兼容性, 顯示, 等高佈局 贊助商廣告(我也要贊助)： 發表評論（目前22條評論） 名稱 (必須) 郵件地址(不會被公開) (必須) 網站 提交評論 秋山說道： 2016年08月22日 11:28 關於“二、absolute與等高佈局”這裏面給父容器設置了overflow:hidden,這個在實際使用時不妥，如果我們這個容器裏面有一個日曆彈層或者其他彈層，超出了父容器的寬高，此時，超出的部分會被隱藏 回覆 律訊小前端說道： 2016年03月21日 17:04 你好大神position:absolute+ display:none 和position:absolute + visibility:hidden在性能上還有沒有差異？我實驗了一下這樣都不會產生迴流在性能上是不是可以理解爲他們都是一樣的？ 回覆 july_L說道： 2014年11月19日 14:27 第一張圖的IE6/7下margin與absolute元素重疊 圖片跑到距左側的位置不知道是什麼原因 設置了定位的left：0px;時就乖乖的呆在了原來的位子 實現了和設置父標籤爲span一樣的效果 回覆 Joyce說道： 2013年10月24日 11:06 那個”絕對定位與登高佈局demo”是有問題的，如果你給兩個box都加上顏色，你會發現增加其中一個box的高度，另一個並沒有增加。我之前看過一篇等高佈局博文，採用的是背景色與內容分離純css實現，並且兼容IE6~7。具體實現是使用float，嵌套div。有一個缺點就是列數n就需要嵌套n層 回覆 小菜說道： 2012年07月23日 12:13 在table中，給table或者td設置：position:relative，td內的元素設置：position:absolute失效，求詳解 回覆 張 鑫旭說道： 2012年07月23日 16:08 @小菜 td標籤不少CSS屬性是不支持的 回覆 薇薇說道： 2012年03月27日 14:39 我自己模仿“ margin定位元素絕對定位元素重疊的誤會”這篇文章寫了demo,發現在虛擬機下面的ie6瀏覽器裏不兼容，把代碼給朋友試了下，她用ietester測試的沒問題。希望樓主有時間可以再看下。 回覆 弄月說道： 2011年05月24日 17:26 請問爲什麼用absolute設置隱藏, 當顯示隱藏元素時, 無需判斷隱藏前的position值? 如果元素在隱藏前是relative或本身就是absolute的元素, 隱藏後顯示卻變成static了, 不會有問題嗎? 回覆 張 鑫旭說道： 2011年05月24日 18:42 @弄月 是有這個問題。 回覆 水中月明說道： 2013年08月22日 03:06 可以定義一個類專門用來進行隱藏，放在css聲明的最下方 .hidden{position: absolute;top:-9999em;} 然後通過控制給元素添加這個類或者移除這個類來實現它的隱藏顯示 這樣的方式不是挺好的嗎？ 回覆 海玉說道： 2011年04月28日 14:57 inline-block化的元素有三大特性：包裹性；高寬可定義；圖文混排。然而，div, p這類標籤應用了position:absolute後，在非IE6/7瀏覽器下，只有包裹性和高寬可定義這兩個特性，但並不支持圖片混排，也就是與圖片文字在一起的時候會換行。這個觀點很新奇，值得細細推敲一番。 回覆 自由人說道： 2011年04月13日 11:01 學習了啊。。。定位這塊着實讓我頭疼哎。。。 回覆 淘寶購物說道： 2011年03月30日 21:35 膜拜中，請打擾！ 回覆 娃哈哈說道： 2011年03月29日 19:06 能把張含韻小姐的左半邊放出來咩~~很期待的說~~ 回覆 直覺說道： 2011年03月25日 16:45 用absolute實現等高佈局真的很巧妙哇！ 圖文混排也是經常要用到的，這篇文章讓人受益匪淺 回覆 feng33說道： 2011年03月24日 14:21 1px有利於屏幕解讀器的正確讀取 回覆 feng33說道： 2011年03月24日 13:49 之前看過確保邊框的顯示總是用了這樣的隱藏模式.hidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } 回覆 wmtimes說道： 2011年03月23日 13:13 相對和絕對定位這個屬性用的還比較少。 回覆 素裏太守說道： 2011年03月23日 09:21 “使用display:none與display:block/inline來實現DOM元素的顯隱控制，那你就out了”這句話孟浪了，原因聽俺慢慢道來。 瀏覽器的Render Engine(Trident，Gecko，Webkit)中有兩個最重要的數據結構：DOM TREE與RENDER TREE。DOM TREE是JAVA SCRIPT程序員能夠直接操作的數據，比如遍歷，修改，刪除，增加DOM TREE的結點，但RENDER TREE則不是JAVA SCRIPT程序員能直接涉足的。RENDER TREE必須通過修改DOM TREE的結點相關屬性間接實現，最簡單的例子非“display:none與display:block/inline”莫屬。一個DOM TREE的結點不一定有對應的RENDER TREE結點（比如script），但display屬性爲none的節點一定沒有RENDER TREE結點。將display屬性動態設置爲none的節點將引發RENDER TREE的節點刪除操作，反之亦然。 當某個應用必須權衡考慮內存耗用，計算時間，帶寬消耗的時候，”使用display:none與display:block/inline”就變得很有必要，移動網站設計就是一例。 回覆 gouf說道： 2011年03月22日 14:52 absolute的bug解析得太好了 回覆 夏雨說道： 2011年03月21日 19:04 絕對定位等高佈局是亮點！ 回覆 濯焰說道： 2011年03月20日 23:18 用absolute實現隱藏，很強大！ 回覆 張鑫旭more，09年華中科技大學畢業，現上海，就職於閱文集團，專注web前端偏前領域。歡迎關注我的新浪微博。 郵箱：[email protected] QQ：2478466830（商務合作專用） 翻頁太辛苦，試試直接搜索 搜索 文章分類 css相關 (239) graphic相關 (69) as3菜單 (32) canvas相關 (11) SVG相關 (24) HTML相關 (24) js相關 (125) jquery相關 (44) js實例 (63) mobile相關 (11) ps相關 (13) web綜合 (41) 外文翻譯 (37) 文章存檔 2017年五月 (6)2017年四月 (1)2017年三月 (5)2017年二月 (5)2017年一月 (4)2016年十二月 (2)2016年十一月 (7)2016年十月 (2)2016年九月 (3)2016年八月 (6)2016年七月 (5)2016年六月 (6)2016年五月 (2)2016年四月 (2)2016年三月 (4)2016年二月 (3)2016年一月 (6)2015年十二月 (2)2015年十一月 (7)2015年十月 (1)2015年八月 (4)2015年七月 (3)2015年六月 (3)2015年五月 (3)2015年四月 (3)2015年三月 (7)2015年二月 (4)2015年一月 (4)2014年十二月 (7)2014年十一月 (1)2014年十月 (3)2014年九月 (1)2014年八月 (4)2014年七月 (3)2014年六月 (4)2014年五月 (1)2014年四月 (5)2014年三月 (3)2014年二月 (3)2014年一月 (3)2013年十二月 (3)2013年十一月 (6)2013年十月 (1)2013年九月 (6)2013年八月 (3)2013年七月 (7)2013年六月 (3)2013年五月 (7)2013年四月 (5)2013年三月 (5)2013年二月 (4) 2013年一月 (10) 2012年十二月 (5) 2012年十一月 (4) 2012年十月 (4) 2012年九月 (5) 2012年八月 (5) 2012年七月 (5) 2012年六月 (5) 2012年五月 (6) 2012年四月 (4) 2012年三月 (9) 2012年二月 (6) 2012年一月 (4) 2011年十二月 (5) 2011年十一月 (7) 2011年十月 (3) 2011年九月 (9) 2011年八月 (5) 2011年七月 (6) 2011年六月 (7) 2011年五月 (8) 2011年四月 (8) 2011年三月 (6) 2011年二月 (6) 2011年一月 (5) 2010年十二月 (7) 2010年十一月 (8) 2010年十月 (7) 2010年九月 (10) 2010年八月 (10) 2010年七月 (10) 2010年六月 (8) 2010年五月 (11) 2010年四月 (14) 2010年三月 (11) 2010年二月 (1) 2010年一月 (16) 2009年十二月 (14) 2009年十一月 (7) 2009年十月 (6) 2009年九月 (36) 2009年八月 (12) 最新文章 jquery.guide.js新版上線操作嚮導鏤空提示jQuery插件 小tips:使用canvas在前端實現圖片水印合成 使用electron構建跨平臺Node.js桌面應用經驗分享 HTML accesskey屬性與web自定義鍵盤快捷訪問 HTML tabindex屬性與web網頁鍵盤無障礙訪問 HTML <area><map>標籤及在實際開發中的應用 CSS :focus僞類JS focus事件提高網站鍵盤可訪問性 真正瞭解CSS3背景下的@font face規則 CSS font-family常見中文字體對應的英文名稱 canvas 2D炫酷動效的實現套路和需要的技術積累 熱門總排行 好吧，CSS3 3D transform變換，不過如此！ (407700) 基於HTML5的可預覽多圖片Ajax上傳 (381486) jQuery powerFloat萬能浮動層下拉層插件 (367682) 讓所有瀏覽器支持HTML5 video視頻標籤 (315970) CSS box-flex屬性，然後彈性盒子模型簡介 (309869) jQuery Pagination Ajax分頁插件中文詳解 (293085) 拜拜了,浮動佈局-基於display:inline-block的列表佈局 (292402) 讓IE6/IE7/IE8瀏覽器支持CSS3屬性 (281430) 理解CSS3 transform中的Matrix(矩陣) (256891) 關於文字內容溢出用點點點(...)省略號表示 (234302) 今日熱門 CSS實現兼容性的漸變背景(gradient)效果 (354) 讓所有瀏覽器支持HTML5 video視頻標籤 (244) 好吧，CSS3 3D transform變換，不過如此！ (233) 拜拜了,浮動佈局-基於display:inline-block的列表佈局 (192) CSS box-flex屬性，然後彈性盒子模型簡介 (161) css行高line-height的一些深入理解及應用 (159) 基於HTML5的可預覽多圖片Ajax上傳 (156) 如何靈活利用免費開源圖標字體-IcoMoon篇 (154) HTML5 drag & drop 拖拽與拖放簡介 (144) 我對CSS vertical-align的一些理解與認識（一） (139) Powered by WordPress | Designed by zhangxinxu Copyright© 2009-2017 張鑫旭-鑫空間-鑫生活 鄂ICP備09015569號 我的應用文章(RSS) 返回頂部↑登錄 想找個師兄入門前端？不妨× </div>
下面是文字解說
1．定位的專業解釋
(1)語法
position:static|absolute|fixed|relative
(2)說明
從上面語法可以看出，定位的方法有很多種，它們分別是靜態（static），絕對定位（absolute），固定(fixed)，相對定位（relative）。在這個教程裏，我不逐一講，只講最常用也是最實用的兩個定位方法：絕對定位（absolute）、相對定位（relative）。
絕對定位（absolute）：將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，即還是遵循HTML定位規則的，則依據body對象左上角作爲參考進行定位。絕對定位對象可層疊，層疊順序可通過z-index屬性控制，z-index值爲無單位的整數，大的在最上面，可以有負值（目前負值FF不支持）。
相對定位（relative）：對象不可層疊，依據left，right，top，bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設計。
2．定位的形象解釋
我先來架設一個虛擬的場景：有一個矩形的房間，裏面還有一個水桶裝了些水，水裏還浸泡着一個西瓜，這個房間半空中還有不少的鉤子用於掛東西用。現在我把網頁元素與上面物件對應上，那麼房間就是一個網頁，水桶是網頁中的一個板塊，桶中的水就是文本流，西瓜就是將要被定位的對象。
（1）貢獻的絕對定位（absolute）
對照前面解釋，如果西瓜被賦予絕對定位，那麼就等於把西瓜從水中撈起來掛在半空中的鉤子上，水桶中西瓜原來佔用的空間水會自動填補它（絕對定位對象會讓出自己原先佔用位置，所以說它是貢獻的）。此時如果之前沒有對水桶進行定位設定，那麼被拿起的西瓜位置不會再受水桶位置影響，水桶怎麼移動，西瓜還是掛在原來位置，至於西瓜要怎放，則以房間左上角（body左上角）爲準，用left，right，top，bottom值來定位。
但是如果水桶也給出了定位設置（通常是相對定位，下面有講到這一實用技巧），此時西瓜的擺放就沒有那麼自由了，儘管此時西瓜被拿起來了不會影響水桶中的水（文本流），但它還是要聽桶的話，桶會告訴西瓜“你可以活動，但應該在我的範圍內走動，比方說我要你在我左上方1米處，你就要跟死這一點，我走你也要跟着走”，如果桶中有很多個西瓜，可以全部拿出來吊到半空中，它們將被安排在不同高度的空間（層），所以在房頂垂直往下看，有可能看到不同西瓜層疊在一起的情況（這個所謂的高度在網頁中是不存在的，就像FLASH動畫中的不同層上安排了元素，但它們在看時不會有深度感覺）。可見絕對定位的對象參考目標是它的父級，專業稱之爲包含塊。
（2）自私的相對定位（relative）
相對定位一個最大特點是：自己通過定位跑開了還佔用着原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨立，做什麼事它自己說了算，要定位的時候，它是以自己本身所在位置偏移的（相對對象本身偏移）。再拿前邊作比如來解，那麼此時西瓜似乎是有魔法的，如果西瓜通過相對定位在水桶中偏移了你會看到一個現實生活中不存在的現象：水中有一個地方水凹下去了，周圍的水不能填補它，西瓜看起來在旁邊，如果攪動一下桶中的水，那個凹的位置會發現改變（文本流對相對定位對象還存在影響），但是凹處到西瓜出現的距離始終保持一致。可見文本流與它之間還會互相影響，因爲對象並沒有真正脫離文本流，就像有兩個人在同一層樓水平移動的過程中會有碰頭的機會。
（3）總結兩種定位的特徵
絕對定位就像是把不同對象安排到了一棟高樓的不同樓層(一般指不是第一層，我們這裏理解爲文本流就放在首層)，它們互不影響，但是它們怎麼移動與你樓的地基和麪積（父級）有關。相對定位指對象還是在首層樓與文本流一起存放，它們之間肯定存在影響。
（4）對特殊情況的補充
在用相對定位和絕對定位的時候，有一種情況是它們的定位值用到了負值則對象可沿相反方向移動，剛纔說到的把對象安排在一棟樓的不同層，如果某個對象一開始就是背靠着最外邊牆的，此時再用一個負值定位它，它就會神奇般地跑出牆外去了，當然現實中可沒有這種驚險而又神奇的事發生，本人只爲了延用上面的比如作形象解釋。
分類: div+css