|
position屬性表示元素的定位類型，在CSS布局中，position發(fā)揮著非常重要的作用，一些元素的布局就是用position完成的，鑒于此，本文結(jié)合一些小實(shí)例詳細(xì)講解一下。 position屬性在通常情況下有4個(gè)可選值，分別是：static、fixed、relative、absolute。（還有第5個(gè)屬性sticky，因部分瀏覽器可能還不支持，本文暫不介紹） 一、static 默認(rèn)值，因?yàn)閷?shí)際設(shè)計(jì)網(wǎng)頁的時(shí)候“用不著”，所以不做介紹。（你如果很好學(xué)，可以隨便在網(wǎng)上搜一下，一搜就一大把，一般我們遇到一大把的解答就抓狂，似是而非的說法一大堆向你撲面而來，一定搞得你懵圈，但是我要負(fù)責(zé)地告訴你這個(gè)不會(huì)，隨便看一個(gè)人的解答，他都會(huì)講得清楚明白，幾乎每個(gè)人講解的核心意思都是：這是“默認(rèn)值”，實(shí)踐中幾乎用不到，對(duì)很多人來說懂與不懂一個(gè)樣！呵呵，這下你坦然了吧?。?/p> fixed、relative、absolute好像性格不同的三個(gè)人物，掌握了三個(gè)人物的性格特點(diǎn)基本，就掌握了這塊知識(shí)。我盡可能用最通俗、最形象的語言來描述他們，讓讀者在輕松快樂中學(xué)習(xí)。 二、fixed 輕松調(diào)侃完static之后，緊接著就聊fixed。在之前查閱的資料中，沒有（幾乎沒有）馬上就介紹fixed的，一般都是static-relative-absolute-fixed這樣的順序，fixed排在最后。我不隨波逐流，我覺得fixed特立獨(dú)行，他是野孩子，他不受祖制約束（不是“組織約束”，但他確實(shí)也不受“組織約束”），桀驁不馴。沒有家長(zhǎng)的管教，他無組織、無紀(jì)律，是典型的獨(dú)行俠，因此學(xué)習(xí)他就相對(duì)簡(jiǎn)單（“相對(duì)簡(jiǎn)單”是指在html、css中牽扯因素少），先學(xué)簡(jiǎn)單的符合讀者的認(rèn)知規(guī)律。 現(xiàn)在，讀者對(duì)fixed還沒有一個(gè)具體的感知，先舉個(gè)簡(jiǎn)單的例子-浮動(dòng)廣告，代碼如下： 
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>懸浮廣告</title> 6 <style> 7 .content1{ 8 height:1500px; 9 background:#ccc; 10 } 11 .content2{ 12 height:2000px; 13 background:#ddd; 14 } 15 16 .guanggao{ 17 position:fixed; 18 top:100px; 19 right:80px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="content1"> 25 這是網(wǎng)站第一部分內(nèi)容，右上角是懸浮廣告，top和right的值都是相對(duì)瀏覽器窗口的位置 26 </div> 27 <div class="guanggao"> 28 <img src="img/guanggao.jpg"> 29 </div> 30 <div class="content2"> 31 這是網(wǎng)站第二部分內(nèi)容，浮動(dòng)廣告脫離文檔流，所以它就和網(wǎng)站第一部分內(nèi)容緊挨著了 32 </div> 33 </body> 34 </html> 懸浮廣告是固定定位（position：fixed），他脫離了文檔流，在html安排順序中，懸浮廣告（<div class=”guanggao”><img src=”…”></div>）本來的位置是在，第一部分內(nèi)容（<div class=”content1”>…</div>）與第二部分內(nèi)容（<div class=”content2”>…</div>）之間的，因?yàn)樗撾x了文檔流，第一部分內(nèi)容和第二部分內(nèi)容就當(dāng)他不存在一樣，兩個(gè)塊元素（block）緊挨在一起。浮動(dòng)廣告只相對(duì)于瀏覽器窗口定位，和position：fixed配合的偏移屬性top:100px,right:80px都是相對(duì)于瀏覽器窗口來說的，效果圖如下：
fixed叫“固定定位”,讀者運(yùn)行代碼后應(yīng)該能體會(huì)出，懸浮廣告總是相對(duì)瀏覽器窗口保持top=100px,right=80px不動(dòng)，滾動(dòng)條怎么滾動(dòng)都改變不了他的位置。 為了更加有力地說明固定定位不受祖制約束，請(qǐng)把上邊地代碼調(diào)整一下，把懸浮廣告（<div class=”guanggao”><img src=”…”></div>）放在第一部分內(nèi)容中或者是第二部分內(nèi)容中，在此以放在第一部分內(nèi)容中為例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>懸浮廣告2</title> 6 <style> 7 .content1{ 8 height:1500px; 9 background:#ccc; 10 } 11 .content2{ 12 height:2000px; 13 background:#ddd; 14 } 15 16 .guanggao{ 17 position:fixed; 18 top:100px; 19 right:80px; 20 } 21 22 </style> 23 <script> 24 25 </script> 26 </head> 27 <body> 28 <div class="content1"> 29 這是網(wǎng)站第一部分內(nèi)容，右上角是懸浮廣告，top和right的值都是相對(duì)瀏覽器窗口的位置 30 <div class="guanggao"> 31 <img src="img/guanggao.jpg"> 32 </div> 33 </div> 34 <div class="content2"> 35 這是網(wǎng)站第二部分內(nèi)容，浮動(dòng)廣告脫離文檔流，所以它就和網(wǎng)站第一部分內(nèi)容緊挨著了 36 </div> 37 </body> 38 </html> 運(yùn)行效果和上面的第一段代碼完全一樣，故而不附效果圖了。 他完全不受第一部分內(nèi)容的約束（不受祖制的約束），運(yùn)行后他的偏移屬性（top、right）都是相對(duì)瀏覽器窗口來說的，他的位置跟第一部分內(nèi)容一點(diǎn)關(guān)系都沒有。各位讀者，我說明白了嗎？
下面再舉個(gè)稍微復(fù)雜點(diǎn)（因?yàn)橛衘query）的例子-遮罩 遮罩的應(yīng)用廣泛，一般用于凸顯一部分內(nèi)容同時(shí)也就淡化其他內(nèi)容，比如注冊(cè)、登錄、新增表單、修改表單等，這里以登錄為例（注冊(cè)、新增表單、修改表單跟登錄道理類似）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>遮罩</title> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> 7 <style> 8 .fixed{ 9 position:fixed; 10 width:100%; 11 height:100%; 12 left:0; 13 top:0; 14 display:none; 15 background:rgba(0,0,0,0.5); 16 } 17 18 .login{ 19 position:absolute; 20 top:50%; 21 left:50%; 22 width:300px; 23 display:none; 24 margin-top:-200px; 25 margin-left:-150px; 26 border:1px solid #ccc; 27 padding:60px 40px; 28 background:orange; 29 border-radius:20px; 30 } 31 32 .login p{ 33 text-align:center; 34 } 35 .login p input{ 36 width:78%; 37 height:40px; 38 background:#ccc; 39 border-radius:5px; 40 } 41 #submit{ 42 margin-top:80px; 43 height:50px; 44 } 45 46 </style> 47 <script> 48 $(function(){ 49 $('button').click(function(){ 50 $('.fixed').css('display','block'); 51 $('.login').css('display','block'); 52 }); 53 $('#submit').click(function(){ 54 $('.fixed').css('display','none'); 55 $('.login').css('display','none'); 56 }) 57 }) 58 </script> 59 </head> 60 <body> 61 <button class="button">登錄</button> 62 <div class="fixed"></div> 63 <div class="login"> 64 <p><input type="text" placeholder="請(qǐng)輸入用戶名"></p> 65 <p><input type="password" placeholder="請(qǐng)輸入密碼"></p> 66 <p><input id="submit" type="button" value="登錄"></p> 67 </div> 68 </body> 69 </html> 點(diǎn)擊下圖中的“登錄”按鈕
此時(shí)，出現(xiàn)登錄框，并且在登錄框周圍有遮罩效果（遮罩：凸顯登錄框，淡化周圍元素。出現(xiàn)登錄框和遮罩需要用到j(luò)s或jQuery知識(shí)，這些知識(shí)不在本文討論的范圍之內(nèi)）
點(diǎn)擊上圖登錄框中的“登錄”按鈕，遮罩消失。（這里也用到j(luò)s或jQuery知識(shí)） 因?yàn)檎谡謶?yīng)用較多，所以把上邊的代碼解釋一下： 遮罩（<div class=”fixed”></div>）需要把整個(gè)屏幕遮罩住，所以定位在top=0,left=0,并且全屏寬（width：100%）、全屏高（height：100%），為了不使下面的元素完全看不見，設(shè)置了透明度為0.5，background:rgba(0,0,0,0.5)背景是黑色，透明度為50%。 有的讀者注意到登錄框（<div class=”login”>…</div>）也是固定定位（<style> .login{position:fixed;…} … </style>），其實(shí)他也可以設(shè)置為absolute，如果沒有設(shè)置登錄框的position屬性就無法保證登錄框顯示在遮罩之上（這涉及到定位元素的堆疊順序的知識(shí)，因不是本文重點(diǎn)，故而點(diǎn)到為止） 這么一看，好像fixed也不簡(jiǎn)單呀。其實(shí)，懸浮廣告還是非常好理解的，遮罩需要點(diǎn)js或jQuery知識(shí)，這樣就增加了一點(diǎn)難度，但是對(duì)讀者（要有一點(diǎn)點(diǎn)html、css基礎(chǔ)，我的文章主要面對(duì)這樣的讀者）來說，努力一下應(yīng)該能夠克服，畢竟為了實(shí)現(xiàn)自己的理想，為了技術(shù)上有所提高，這樣的難度應(yīng)該不是大事。退一步說，遮罩你理解不了，懸浮廣告總能理解吧？能理解這一關(guān)也算勉強(qiáng)通過了。 下一關(guān)，讓我們見識(shí)見識(shí)relative，他又是怎樣的一個(gè)人呢？
三、relative 請(qǐng)讀者先看下面這段代碼，為了增加讀者閱讀代碼的愉悅感，先從最簡(jiǎn)單、最基本的入手。以下的代碼非常簡(jiǎn)潔，只有Box2設(shè)置了定位屬性（position：relative），其他元素均未設(shè)置定位屬性，這樣就簡(jiǎn)化了問題，便于讀者理解。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_Box2</title> 6 <style> 7 div{ 8 width:100px; 9 height:100px; 10 11 } 12 #Box2{ 13 position:relative; 14 left:20px; 15 top:50px; 16 background:orange; 17 } 18 #Box1{ 19 background:green; 20 } 21 #Box3{ 22 background:blue; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="Box1">Box1</div> 28 <div id="Box2">Box2</div> 29 <div id="Box3">Box3</div> 30 </body> 31 </html> 效果圖如下：
relative是相對(duì)定位，相對(duì)誰定位呢？相對(duì)于自己，確切地說是相對(duì)于自己偏移之前（圖中虛線框就是Box2原本的位置）。別人的定位基準(zhǔn)是html/body，或是祖輩，relative也挺個(gè)性，是個(gè)自戀狂，他以自我為中心，只和自己定位前的位置比較，未設(shè)置position：relative時(shí)在哪個(gè)位置，設(shè)置position：relative后的位置就和未設(shè)置時(shí)比較，進(jìn)行偏移。Box2就相對(duì)于虛線框位置進(jìn)行偏移。（position：relative當(dāng)然要配合使用偏移屬性top、left、right、bottom等，如果沒有偏移屬性配合使用，光有position：relative，跟沒有設(shè)置position是一樣的，瞎子點(diǎn)燈——白費(fèi)蠟）。 讀者發(fā)現(xiàn)一個(gè)問題沒有？relative他雖然偏移了，但原來的位置還在那兒，Box1和Box3是不能擠占的，靈魂雖然走了，但軀體還在那兒，有點(diǎn)像單位里吃空餉的，拿著工資，辦公桌還在那兒擺著，就是沒見他上過班。這些讓我想起了一個(gè)成語“尸位素餐”！ 下面，舉個(gè)relative應(yīng)用的例子 讀者在點(diǎn)擊導(dǎo)航欄上的菜單時(shí)，可能會(huì)遇到超鏈接發(fā)生稍許偏移的情況，這是因?yàn)檫@種效果能和用戶有個(gè)交互，增加用戶體驗(yàn)。 代碼很簡(jiǎn)單，如下： 
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_a</title> 6 <style> 7 li{ 8 display:inline-block; 9 margin:0 20px; 10 } 11 li:hover{ 12 position:relative; 13 top:10px; 14 left:6px; 15 } 16 </style> 17 </head> 18 <body> 19 <ul> 20 <li><a href="#">首頁</a></li> 21 <li><a href="#">新聞</a></li> 22 <li><a href="#">聯(lián)系我們</a></li> 23 <li><a href="#">關(guān)于我們</a></li> 24 </ul> 25 </body> 26 </html> 效果圖如下：
這個(gè)例子，讀者理解嗎？如果理解了，請(qǐng)往下看另一個(gè)例子——陰影效果，這個(gè)例子也不難
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_shadow</title> 6 <style> 7 div.shadow{ 8 background:#ccc; 9 float:right; 10 } 11 12 img{ 13 position:relative; 14 left:-5px; 15 top:-5px; 16 17 border:1px solid #465B68; 18 padding:6px; 19 background:#fff; 20 width:208px; 21 height:151px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="shadow"> 27 <img src="img/guanggao.jpg"> 28 </div> 29 </body> 30 </html> 效果圖如下：
div的背景是灰色，照片本來是和它重疊的，看不到背景，可是照片相對(duì)定位（relative）后，（相對(duì)自己原來的位置）向左偏移5px，向上偏移5px，由于它未脫離文檔流，它的軀殼還在原來的位置不動(dòng)，并且露出了div的背景，這樣就形成了陰影效果。
讀者可能感覺出relative個(gè)性鮮明，只和自己比較，應(yīng)該是最簡(jiǎn)單的呀！可以這么理解，但是relative不總是唱獨(dú)角戲，他有時(shí)和absolute聯(lián)袂出演，所以，讀者還是先對(duì)absolute有個(gè)了解吧。
四、absolute absolute是絕對(duì)定位，讀者先看一段代碼（凡是讓讀者上來就看一段代碼，而不是講解知識(shí)點(diǎn)然后再看代碼，都是因?yàn)榇a很簡(jiǎn)單，并且需要借助于代碼說明問題，所以，讀者盡管放心，不要一上來看到的是代碼就有畏難情緒，以為代碼比文字更費(fèi)解，恰恰相反，這種情況下，代碼一定很簡(jiǎn)單，我寫文章盡量不給讀者設(shè)置閱讀障礙）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>absolute_Box2</title> <style> body{ background:gray; height:5000px; } .wrap{ border:2px solid blue; } #Box1,#Box3{ height:200px; background:orange; border:1px dashed red; } #Box2{ position:absolute; bottom:100px; right:200px; background:orange; border:1px dashed red; } </style> </head> <body> <div class="wrap"> <div id="Box1">Box1</div> <div id="Box2">Box2</div> <div id="Box3">Box3</div> </div> </body> </html> 效果圖如下：
這段代碼和relative第一段代碼差別不是很大，這段代碼只有Box2設(shè)置了定位屬性（position：absolute），其他元素均未設(shè)置定位屬性，這是為了簡(jiǎn)化問題，防止其他因素干擾，實(shí)際情況中未必這樣，有時(shí)absolute和其他定位屬性的值（比如：relative）可能同時(shí)出現(xiàn)，這是本文后面要討論的，后面再說。 在這個(gè)前提條件下（上段文字中的“只有Box2….，其他元素均未….”），注意前提條件，本段的結(jié)論，如果脫離前提條件，就不成立了。在此，提示讀者這一點(diǎn)。Box2設(shè)置了絕對(duì)定位，他的偏移屬性（例如本例中bottom：100px，right：200px）是相對(duì)瀏覽器窗口來說的。（再次說明，在滿足本段的前提條件下，結(jié)論才成立。后面會(huì)講到前提條件變了，偏移屬性就不再相對(duì)于瀏覽器窗口來說了。本段提到 “前提條件”有5次之多?。?/p> absolute脫離了文檔流（這一點(diǎn)和誰相像，對(duì)——是fixed），absolute（fixed）不在這個(gè)單位上班，調(diào)走了，就不在這個(gè)單位領(lǐng)工資了，更沒有他的辦公桌了，relative吃空餉，擺辦公桌也不上班，靈魂走了，軀殼還在（占位）。這是absolute和fixed的相同點(diǎn)，同時(shí)也是absolute（fixed）和relative的區(qū)別。 absolute在滿足“前提條件”（就是“只有Box2…,其他元素均未…”那個(gè)前提條件）時(shí)和fixed相同，偏移屬性相對(duì)于瀏覽器窗口來說的。 有的讀者問了，這么說fixed和absolute幾乎完全一樣了？確實(shí)，相同的地方很多，但不同的地方還是有的，比如，在滾動(dòng)條滾動(dòng)時(shí)，fixed在瀏覽器窗口中是不動(dòng)的（fixed，固定不動(dòng)的意思），absolute是隨著滾動(dòng)條滾動(dòng)的。讀者可以往回看，對(duì)比一下懸浮廣告和滿足“前提條件”下的Box2，就明白這一點(diǎn)了。 當(dāng)然，absolute和fixed還有其它不同，讀者在繼續(xù)學(xué)完absolute后就知道了。 前面講到absolute的那段代碼（“前提條件”Box2那段），很簡(jiǎn)潔，當(dāng)時(shí)是為了說明問題方便，實(shí)際情況下，在整個(gè)代碼段中，absolute往往不是自己出現(xiàn)，經(jīng)常和別的定位值一起使用，更多的時(shí)候是和relative一起出現(xiàn)。還記得在relative的最后那句話嗎？——“relative不總是唱獨(dú)角戲，他有時(shí)和absolute聯(lián)袂出演”。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_Box2</title> 6 <style> 7 body{ 8 background:gray; 9 height:5000px; 10 } 11 .wrap{ 12 border:2px solid blue; 13 position:relative; 14 } 15 #Box1,#Box3{ 16 height:200px; 17 background:orange; 18 border:1px dashed red; 19 } 20 #Box2{ 21 position:absolute; 22 bottom:100px; 23 right:200px; 24 25 background:orange; 26 border:1px dashed red; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="wrap"> 32 <div id="Box1">Box1</div> 33 <div id="Box2">Box2</div> 34 <div id="Box3">Box3</div> 35 </div> 36 </body> 37 </html> 上面的代碼里既有relative，也有absolute，還是Box2，只是外面的包裹器（class=“wrap”）多了一個(gè)定位屬性（position：relative）。為了說明問題，在不改變代碼含義前提下，稍微修改一下，結(jié)構(gòu)可以描述成這樣的：<div class=”wrap” style=”position:relative”>…<div id=”Box2” style=”position:absolute”>Box2</div>…</div> 這樣relative-absolute聯(lián)袂出現(xiàn)了，而且還是父子關(guān)系（當(dāng)然不僅限于父子關(guān)系，也可以推廣到爺孫關(guān)系等…） 效果圖如下：
此時(shí)，Box2（position：absolute）的偏移屬性（right：200px；bottom：100px）是相對(duì)于父元素（確切的說是：有static以外定位的祖輩元素）來說的。absolute有祖輩了（一般情況下祖輩是relative），有家長(zhǎng)的孩子不再是野孩子了，出去玩玩可以，但是得在家長(zhǎng)的附近玩，得到家長(zhǎng)的寵愛，同時(shí)也受到家長(zhǎng)的約束。這時(shí)，讀者想到fixed了嗎？這個(gè)可憐的孩子，一出生就走入社會(huì)，沒有家長(zhǎng)的寵愛，當(dāng)然也沒有家長(zhǎng)去約束他。這也是absolute和fixed的區(qū)別，到最后，我們?cè)俸煤每偨Y(jié)一下relative、absolute、fixed的異同點(diǎn)。 absolute的家長(zhǎng)有個(gè)正規(guī)的名字叫“包含框”，通俗的說就是“定位基準(zhǔn)”，偏移屬性的值都是相對(duì)于包含框（定位基準(zhǔn)）來說的。 relative-absolute應(yīng)用的第一個(gè)例子——提示框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_tip</title> 6 <style> 7 .tip{ 8 position:relative; 9 color:red; 10 cursor:pointer; 11 } 12 .tip:hover span{ 13 position:absolute; 14 top:30px; 15 left:-30px; 16 17 display:block; 18 width:100px; 19 background:#424242; 20 color:#fff; 21 padding:10px; 22 } 23 .tip span{ 24 display:none; 25 } 26 </style> 27 </head> 28 <body> 29 <p> 30 Web前端知識(shí)包括： 31 <span class="tip"> 32 CSS 33 <span>CSS 指層疊樣式表 (Cascading Style Sheets),它是網(wǎng)頁外觀表現(xiàn)樣式</span> 34 </span>、 35 <span class="tip"> 36 Html 37 <span>超文本標(biāo)記語言（英語：HyperText Markup Language，簡(jiǎn)稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言</span> 38 </span class="tip">、 39 <span class="tip"> 40 JavaScript 41 <span>JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備</span> 42 </span> 43 </p> 44 </body> 45 </html> 效果圖如下：
提示框（position：absolute）是相對(duì)于父元素（position：relative）來定位的。
relative-absolute應(yīng)用的第二個(gè)例子——懸浮出現(xiàn)二級(jí)子菜單
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_zicaidan</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .nav{ 12 background:blue; 13 color:#fff; 14 } 15 .nav span{ 16 display:inline-block; 17 padding:30px 50px; 18 } 19 li{ 20 list-style:none; 21 } 22 23 .zicaidan{ 24 position:relative; 25 cursor:pointer; 26 27 } 28 .zicaidan ul{ 29 display:none; 30 background:#000; 31 } 32 .zicaidan ul li{ 33 padding:30px; 34 } 35 .zicaidan ul li:hover{ 36 background:#aaa; 37 color:red; 38 } 39 .zicaidan:hover ul{ 40 position:absolute; 41 top:80px; 42 left:10px; 43 display:block; 44 45 } 46 </style> 47 </head> 48 <body> 49 <div class="nav"> 50 <span>首頁</span> 51 <span class="zicaidan"> 52 新聞 53 <ul> 54 <li>新聞1</li> 55 <li>新聞2</li> 56 <li>新聞3</li> 57 <li>新聞4</li> 58 </ul> 59 </span> 60 <span class="zicaidan"> 61 聯(lián)系我們 62 <ul> 63 <li>聯(lián)系方式1</li> 64 <li>聯(lián)系方式2</li> 65 <li>聯(lián)系方式3</li> 66 </ul> 67 </span> 68 </div> 69 </body> 70 </html> 效果圖如下：
懸浮出現(xiàn)二級(jí)子菜單和提示框道理上基本差不多，不再贅述。
好了，到了該總結(jié)總結(jié)的時(shí)候了，我先陳述一下每個(gè)人的特點(diǎn)，穿插著他們的異同點(diǎn)，最后用一個(gè)表格簡(jiǎn)單整理一下。 fixed,一出生就被家長(zhǎng)拋棄了，他是野孩子，無拘無束，他脫離文檔流，懸浮在一般元素之上，他在與不在對(duì)別人來說都一樣，沒啥影響。他的偏移屬性值是相對(duì)于瀏覽器窗口來說的，也就是他相對(duì)于瀏覽器窗口固定，他不隨滾動(dòng)條一起滾動(dòng)。典型應(yīng)用，懸浮廣告、遮罩。 relative是自戀狂，偏移屬性值是相對(duì)于他在正常情況下來說的，他自己和自己比較。偏移后堆疊在一般元素之上，他原來的位置還在那兒占著，占著辦公桌還不上班，吃空餉。典型應(yīng)用，陰影效果（relative單獨(dú)使用）。 absolute如果沒有家長(zhǎng)（沒有家長(zhǎng)：所有祖輩元素均沒有static以外的定位），他就和fixed很像，脫離文檔流，懸浮于一般元素之上，他在與不在對(duì)別人來說都一樣，沒啥影響。他的偏移屬性值（top、right、bottom、left簡(jiǎn)稱：TRBL 上右下左）是相對(duì)于瀏覽器窗口來說的，也就是他相對(duì)于瀏覽器窗口固定，他隨著滾動(dòng)條一起滾動(dòng)（這是他和fixed的區(qū)別）。 absolute更多的時(shí)候是有家長(zhǎng)的，家長(zhǎng)一般就是relative，relative-absolute組合使用，這是的absolute就不再相對(duì)瀏覽器窗口定位了，而是相對(duì)于父元素（relative）定位，有了家長(zhǎng)的孩子不再滿世界撒野，而是在家長(zhǎng)的管束下，但他仍然脫離文檔流，不和一般的元素爭(zhēng)搶位置，一般元素就當(dāng)他不存在一樣，他堆疊在一般元素之上。典型應(yīng)用，提示框和懸浮出現(xiàn)二級(jí)子菜單。
注： relative-absolute（組合）在通常情況下，relative作為“定位父元素”。 先解釋一下“父元素”確切的說應(yīng)該是直系祖輩元素，各種資料說法不一，但表達(dá)的意思都是一樣的，本文有時(shí)叫“父元素”，有時(shí)也叫“祖輩元素”，有時(shí)還叫“直系祖輩元素”，讀者不用糾結(jié)叫法，知道它的涵義就可以了。 再解釋一下“定位”，是指該元素的定位屬性值是除static以外的值，更多的時(shí)候是position:relative，所以本文直接寫成“relative-absolute”。
鑒于個(gè)別內(nèi)容不便于文字表達(dá)，本人計(jì)劃于近期在視頻學(xué)習(xí)網(wǎng)站發(fā)布關(guān)于position的相關(guān)視頻，內(nèi)容較之本文稍有拓展，屆時(shí)，我會(huì)將視頻鏈接發(fā)布于此。讀者如有興趣，敬請(qǐng)關(guān)注。
|
|
|
