相對定位與絕對定位

1、CSS定位與定位應(yīng)用定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點(diǎn)，如果不清楚定位那么可能一些效果將不能實(shí)現(xiàn)，即使實(shí)現(xiàn)了某些效果，在瀏覽器的兼容性方面可能也會出現(xiàn)問題，如果理清了定位的原理，那么定位會讓網(wǎng)頁實(shí)現(xiàn)的更加完美。在網(wǎng)頁制作中，例如實(shí)現(xiàn)對聯(lián)廣告，這時候就需要設(shè)置絕對定位，來實(shí)現(xiàn)如圖1所示的效果。圖1 對聯(lián)廣告一、position的三種定位方式圖1演示了絕對定位的應(yīng)用，position定位屬性主要包含relative相對定位、absolute絕對定位和static默認(rèn)定位三種定位方式，下面分別對這三種定位方式進(jìn)行講解。（1）relative相對定位，相對于文檔流原來位置的偏移，原占位大小完整保留。相對

2、定位常用的屬性、值及其含義如下表所示。 定位屬性屬性值說明定位方式positionposition:relative;采用相對定位，相對于本來位置的偏移偏移量leftleft:20px;距離參照物左側(cè)20pxrightright:50px;距離參照物右側(cè)50pxtoptop:10px;距離參照物頂部10px，相對定位參照物為元素的本來位置bottombottom:100px;距離參照物底部100px一般情況下，right和left或top和bottom不應(yīng)同時存在。他們之間有個公式。left值等于-right，同樣的，top值等于-bottom，例如：“l(fā)eft:10px;”等價于“right

3、:-10px;”。我們根據(jù)上表中對relative知識的描述，來看圖2中相對定位元素“第2塊”的特點(diǎn)。圖2 相對定位在圖2中，第2塊內(nèi)容本應(yīng)該在虛線范圍內(nèi)，但是它卻移動了位置，主要是在圖2頁面的第2塊中加入“position:relative;top:10px;left:20px;”代碼，第2塊實(shí)現(xiàn)了相對定位，并且左、上都有一定的偏移量，所以就呈現(xiàn)了如圖2所示的效果。圖2頁面的關(guān)鍵代碼如下所示：< html>< head>< title>相對定位< /title>< style type="text/css">di

4、v    color:#fff;    font:bold 22px 黑體;    width:150px;    height:120px;    background:red;    float:left;.div2    height:150px;    backgroun

5、d:#ff7300;    position:relative;    top:10px;    left:20px; .clear    background:blue;< /style>< /head>< body>< div>第1塊< /div>< div class="div2">第2塊< /div>< div clas

6、s="clear">第3塊< /div>< /body>< /html> 從上面的代碼中可以知道，相對定位有如下3個特點(diǎn)：參照物：相對定位是相對于未設(shè)置定位方式前的位置，其參照物就是原來位置。偏移量：方式確定后，根據(jù)與參照物的具體偏移量來確定元素新位置。占位：相對定位偏移后的元素，其占有的位置是原來位置，其偏移后會覆蓋并位于其他重疊元素（如“第3塊”）的上面，但不會增加高度和寬度。（2）absolute絕對定位，完全脫離文檔流，是相對于第一個非默認(rèn)定位方式的上級元素的距離。相對定位的元素大小會在文檔流原來位置占去相同大小的頁面空間。

7、而絕對定位則不再占原文檔流頁面的任何空間。其常用屬性語法語義與相對定位類似，例如“position:absolute;top:200px;left:150px;”。定位方式的區(qū)別導(dǎo)致了參照物區(qū)別。具體參照物為上級元素中，第一個存在非默認(rèn)定位方式的元素，它完全脫離了文檔流。下面圖2頁面中的代碼進(jìn)行修改，只修改樣式.div2，修改為絕對定位，為方便參照，加大了偏移量，其他代碼均沒有任何變化，.div2修改后的代碼如下所示。 .div2    height:150px;    background:#ff7300;

8、60;   position:absolute;    top:180px;    left:200px; 修改后在瀏覽器中運(yùn)行的效果如圖3所示，第2塊風(fēng)格改為絕對定位后，位置也發(fā)生了變化，并且不再占有原來的位置。圖3 絕對定位學(xué)習(xí)完絕對定位，可以發(fā)現(xiàn)絕對定位也有3個特點(diǎn)：參照物：絕對定位參照物是第一個非默認(rèn)定位方式的上級元素，如不存在則為整個頁面。偏移量：方式確定后，根據(jù)與參照物的具體偏移量來確定元素新位置。占位：絕對定位偏移后的元素，不再占原來位置，其偏移后會覆蓋并位于其他重疊元素

9、（如“第3塊”）的上面?，F(xiàn)在為三個div增加一個上級div，并且設(shè)置上級div的相對定位為relative，上外邊距設(shè)置50px，左邊距設(shè)置為60px，修改后的頁面代碼如下所示。 < html>< head>< title>絕對定位< /title>< style type="text/css">.div1    color:#fff;    font:bold 22px 黑體;    width

10、:150px;    height:120px;    background:red;    float:left;.div2    height:150px;    background:#ff7300;    position:absolute;    top:180px;   

11、60;left:200px; .clear    background:blue;.div_big    position:relative;    top:50px;    left:60px;< /style>< /head>< body>  < div class="div_big">    < d

12、iv class="div1">第1塊< /div>    < div class="div1 div2">第2塊< /div>     < div class="div1 clear">第3塊< /div>  < /div>< /body>< /html>修改完上面的代碼后，在瀏覽器中運(yùn)行的效果如圖4所示。 圖4 絕對定位及相對定位的

13、應(yīng)用position還有一種類似的定位方式為固定定位，值為fixed。同樣完全脫離文檔流，但參照物為瀏覽器的可見范圍。但只工作在IE7.0的strict模式下，這里稍微提下。（3）static靜態(tài)無偏移，不填時默認(rèn)屬性，偏移量屬性無效，屬于常規(guī)文檔流。雖然這個參數(shù)只有在JavaScript中實(shí)現(xiàn)某些效果時使用，但必須理解static定位方式對應(yīng)的常規(guī)文檔流概念。在前面內(nèi)容中，我們學(xué)習(xí)并不斷涉及到文檔流的概念，我們知道，它是頁面內(nèi)容的組織方式，即從上至下，先分行；然后每行根據(jù)元素的特點(diǎn)放置元素：塊級元素獨(dú)占一行，行級元素從左至右排列。這種組織方式就是往容器中放置流體。流體即水、油等液體，特點(diǎn)是自

14、動緊密排列填充容器，就好像往水缸倒水。而非流體則是無此特點(diǎn)，如屋子里擺放各類家具。常規(guī)文檔流中的“常規(guī)”，是指除浮動和絕對定位外，網(wǎng)頁顯示元素的默認(rèn)組織方式。相對于浮動與絕對定位的特殊情況，常規(guī)文檔流可以簡單的描述為“原來位置”。上面我們講解了定位屬性中的三種定位方式，其中相對定位與絕對定位，會與原文檔流形成堆疊，覆蓋在其他重疊位置元素的上面。那么：（1）為什么相對或絕對定位元素會位于常規(guī)文檔流前面呢？（2）當(dāng)有多個相對或絕對定位元素存在時，他們又應(yīng)該如何排列順序？要回答這些問題，必須理解并掌握疊放層次z-index屬性。二、疊放層次屬性z-indexz-index屬性只對非默認(rèn)定位方式的元素

15、（相對、絕對與固定定位）有效，默認(rèn)值為1，其值為正整數(shù)。值越大，疊放在越前面。其語法格式如：“z-index:2”。在絕對定位效果圖的例子中新增1個絕對定位的div，并設(shè)置第2塊疊放層次為“z-index:2”，修改后的代碼如下所示。 < html>< head>< title>相對定位< /title>< style type="text/css">div    color:#fff;    font:bold 22px 黑體;

16、60;   width:150px;    height:120px;    background:red;    float:left;.div2    height:150px;    background:#ff7300;    position:relative;    top:1

17、0px;    left:20px;    z-index:2; .clear    background:blue;.div4    position:absolute;    top:100px;left:100px;    background:green;< /style>< /head>< body>< d

18、iv>第1塊< /div>< div class="div2">第2塊< /div>< div class="clear">第3塊< /div>< div class="div4">第4塊(未設(shè)置z-index)< /div>< /body>< /html> 在瀏覽器中運(yùn)行上面的代碼，效果如圖5所示。 圖5 疊放層次的應(yīng)用在圖5中，可以很明顯的看到，疊放屬性是“z-index:2”的第2塊位于最上面，第4塊其次，最底下是未

19、設(shè)置絕對定位的文檔流。第4塊并未設(shè)置z-index的值，但絕對定位的元素，其z-index默認(rèn)值為1。我們再把上面代碼略修改，把第2塊的“z-index:2”屬性去掉。那么，它的z-index值應(yīng)該也是默認(rèn)值1，這時就出現(xiàn)1個問題，同層次如何確定疊放順序呢？在瀏覽器中運(yùn)行修改后的代碼，效果如圖6所示。 圖6 疊放層次后來者居上從圖6中我們很容易得出答案，同層間，按代碼中出現(xiàn)順序排，后出現(xiàn)的居上。因?yàn)榀B放層次值，也可以理解為2在正常順序中位于1后面，因此，可以很簡單的把這些疊放層次的組織順序總結(jié)為“后來者居上”：（1）疊放層次值有大小差異，大的居上。就像建房子，地基即文檔流頁面。樓層數(shù)越大則在越

20、上面。（2）同層間，后出現(xiàn)的居上。三、實(shí)例演示學(xué)習(xí)完定位屬性，特別是絕對定位及疊放層次z-index屬性后，就可以實(shí)現(xiàn)頁面中常用到的帶關(guān)閉按鈕的對聯(lián)廣告效果，具體效果如圖7所示。 圖7 帶關(guān)閉按鈕的對聯(lián)廣告要實(shí)現(xiàn)上述效果，其實(shí)比較簡單：1）在頁面中放置4個元素并設(shè)置為絕對定位2）設(shè)置關(guān)閉圖片的疊放層次為“z-index:2;”3）根據(jù)效果圖，確定：左邊圖的左邊界“l(fā)eft:40px;”右邊圖的右邊界“l(fā)eft:40px;”統(tǒng)一上邊界，“top:30px;”。理清思路后，實(shí)現(xiàn)上述效果的代碼如下所示。< html>< head>< title>帶關(guān)閉按鈕的對聯(lián)廣

21、告< /title>< style tylie="text/css">body    margin:0px;    padding:0px;#advLeft,#advRight,#closeLeft,#closeRight    position:absolute;    top:30px;#advRight,#closeRight    right:40px;#advLeft,#closeLeft