relative absolute实例讲解
生活随笔
收集整理的這篇文章主要介紹了
relative absolute实例讲解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、簡介
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前端偏前領域。歡迎關注我的新浪微博。 郵箱：zhangxinxu@zhangxinxu.com 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
總結
以上是生活随笔為你收集整理的relative absolute实例讲解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安装Anaconda之后cmd打不开
- 下一篇： 有限元法、有限差分法和有限体积法的区别（