CSS的相對定位和絕對定位

一、Static 靜態定位
通常情況下，我們元素的position屬性的值默認為static 就是沒有定位，元素出現在正常的文檔流中，這個時候你給這個元素設置的left,right,bottom,top這些偏移屬性都是沒有效果的，不會生效，比如你設置一個距離左邊距偏移100px的聲明：left:100px 那么這條聲明不會起到任何效果。還有z-index屬性在這時也不會生效。
也就是說我們平時如果不給某元素一個position屬性的聲明，那么它默認的就是我上述的這種情況，不過因為有了浮動，所以通常情況下我們還真不需要給元素設置position屬性！
但是某些特殊的情況下，我們不得不用到position屬性，那我們今天就講講position屬性的relative和absolute值
二、relative?相對定位。
怎么理解呢？如果說我對某元素設置了相對定位，那么首先這個元素他會跟其它的元素一樣，出現在文檔流中它該出現的位置，然后，我們可以設置它的水平或垂直偏移量，讓這個元素相對于它在文檔流中的位置的起始點進行移動。有一點要注意， 在使用相對定位時，就算元素被偏移了，但是他仍然占據著它沒偏移前的空間。這里值得注意的一點是：偏移可不是邊距，跟邊距是不一樣的。
我們先看看下圖：

上圖中有三個浮動的塊，第二個塊是設置了相對定位position:relative了的，這時大家看到它的位置并沒有其它什么不同，跟其它兩個塊一樣都處在正常的文檔流中。
接下來我給那個設置了position:relative的塊設置一個偏移：left:50px ; top:30px 這時我們再看看效果：

這時我們發現第二個塊針對它本身位置的起始點進行了一個偏移，但是它原來所占據的那個位置空間依然還在(虛線框標示的地方)，即使我們把偏移量設置得再大一點，使它完全離開原來的位置，它原來位于文檔流中的位置仍然會存在，不會被第三個塊浮動過來填補掉。
同時，它的偏移也不會把別的塊從文檔流中原來的位置擠開，如果有重疊的地方它會重疊在其它文檔流元素之上，而不是把它們擠開，就像圖中那樣，它已經覆蓋在了第三個塊之上。
我們可以設置它的z-index屬性來調整它的堆疊順序。
三、absolute絕對定位
被設置了絕對定位的元素，在文檔流中是不占據空間的，如果某元素設置了絕對定位，那么它在文檔流中的位置會被刪除，那這個元素到哪去了呢？它浮了起來，其實設置了相對定位relative時也會讓該 元素浮起來，但它們的不同點在于，相對對定位不會刪除它本身在文檔流中占據的那塊空間，而絕對定位則會刪除掉該元素在文檔流中的位置，完全從文檔流中抽了出來，我們可以通過z-index來設置它們的堆疊順序 。
那么絕對定位是如何定位的呢？首先，如果它的父元素設置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就會相對于它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設置定位，那么就得看它父元素的父元素是否有設置定位 ，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對于設置了除static定位之外的定位（比如position:relative）的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會相對于文檔body來定位（并非窗口,相對于窗口定位的是fixed）
絕對定位的元素相對于誰來定位，我們就把這個"誰"叫著參照物，我們結合上面的講解來看看下圖就明白了 ：

我們看一下在瀏覽器里的效果，我們先看看沒有使用絕對定位時的樣子：

?
然后我們給第二個塊設置絕對定位：position:absolute 然后再設置一個偏移：left:150px;top:40px; 這時就變成了下圖所示：

還有一點就是：在設置偏移量的時候，我們可以設置負值。
好了，既然理解了相對定位和絕對定位，那我們應該怎么把它們運用到實際案例中呢？
首先我們來看看下圖：

在上圖中的去購物車結算按鈕左上方有一個紅色的小塊，用來顯示購物車中有幾件商品，大家在沒學會絕對定位之前可能不知道這個紅色的小塊要怎么實現，但是現在剛剛學了絕對定位，這個問題就不再是問題了。
我還是親自來做一下吧，我們先把這個背景圖片弄出來：

然后我們寫HTML:
<div?class="cart_btn">
?
????<span><i>155</i></span>
????<a?href="dd.html"?target="_blank">去購物車結算</a>
????<b></b>
?
</div>
上面HTML代碼中的 span元素就是那個用來顯示購物車中商品數量的小紅塊，a元素中是文字描述，b元素是最右邊的小三角。
我們來看一下CSS代碼：
.cart_btn{width:120px;height:30px;background:url(../images/picA.png)?no-repeat?-17px?7px#f7f7f7;border:1px?solid?#eee;padding-left:30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn?span{background:url(../images/picA.png)?no-repeat?-36px?-54px;padding-left:7px;position:absolute;?top:-12px;left:20px;}
.cart_btn?span?i{float:left;height:20px;background:url(../images/picA.png)?no-repeat?right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}
.cart_btn?a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn?b{display:inline-block;border-color:transparent?transparent?transparent?#CCCCCC;border-style:dashed?dashed?dashed?solid;border-width:5px;height:?0;overflow:?hidden;width:?0;}
上面CSS代碼中我們把購物車圖標作為.cart_btn的背景，這里我們發現一個問題，就是那一張圖片上有三個圖標，大家也發現了，我三個用到圖標的元素都是用這一張圖片做背景，但是顯示的卻不一樣，這里是用到了背景定位問題。
最后我們來看看瀏覽器里的效果：

?

在用DIV+CSS控制排版過程中，定位一直被人認為是一個難點，這主要是表現為很多網友在沒有深入理解清楚定位的原理時，排出來的雜亂網頁常讓他們不知所措，而另一邊一些高手則常常借助定位的強大功能做出些很酷的效果來，比如CSS相冊等等，因此自己雜亂的網頁與高手完美的設計形成鮮明對比，這在一定程度上打擊了初學定位的網友，也在他們心目中形成這樣的一種思想：當我熟練地玩轉DIV+CSS定位時，我就已是高手了。不管你怎么想，我只希望下面的教程能讓你更深入地了解CSS定位屬性。

1.定位的專業解釋?
(1)語法?
position:static|absolute|fixed|relative?
從上面語法可以看出，定位的方法有很多種，它們分別是靜態(static)，絕對定位(absolute)，固定(fixed)，相對定位(relative)。在這個教程里，我不逐一講，只講最常用也是最實用的兩個定位方法：絕對定位(absolute)、相對定位(relative)。?
(2)說明?
相對定位(relative)：相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。?
如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。?

#box_relative {?
position: relative;?
left: 30px;?
top: 20px;?
}?
如下圖所示：?
?
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。?
絕對定位(absolute)：將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，即還是遵循HTML定位規則的，則依據body對象左上角作為參考進行定位。絕對定位對象可層疊，層疊順序可通過z-index屬性控制，z-index值為無單位的整數，大的在最上面，可以有負值(目前負值FF不支持)。?
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。?
普通流中其它元素的布局就像絕對定位的元素不存在一樣：?

#box_relative {?
position: absolute;?
left: 30px;?
top: 20px;?
}?

?
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

2.定位的形象解釋?
我先來架設一個虛擬的場景：有一個矩形的房間，里面還有一個水桶裝了些水，水里還浸泡著一個西瓜，這個房間半空中還有不少的鉤子用于掛東西用。現在我把網頁元素與上面物件對應上，那么房間就是一個網頁，水桶是網頁中的一個板塊，桶中的水就是文本流，西瓜就是將要被定位的對象。?
(1)貢獻的絕對定位(absolute)?
對照前面解釋，如果西瓜被賦予絕對定位，那么就等于把西瓜從水中撈起來掛在半空中的鉤子上，水桶中西瓜原來占用的空間水會自動填補它(絕對定位對象會讓出自己原先占用位置，所以說它是貢獻的)。此時如果之前沒有對水桶進行定位設定，那么被拿起的西瓜位置不會再受水桶位置影響，水桶怎么移動，西瓜還是掛在原來位置，至于西瓜要怎放，則以房間左上角(body左上角)為準，用left，right，top，bottom值來定位。?
但是如果水桶也給出了定位設置(通常是相對定位，下面有講到這一實用技巧)，此時西瓜的擺放就沒有那么自由了，盡管此時西瓜被拿起來了不會影響水桶中的水(文本流)，但它還是要聽桶的話，桶會告訴西瓜“你可以活動，但應該在我的范圍內走動，比方說我要你在我左上方1米處，你就要跟死這一點，我走你也要跟著走”，如果桶中有很多個西瓜，可以全部拿出來吊到半空中，它們將被安排在不同高度的空間(層)，所以在房頂垂直往下看，有可能看到不同西瓜層疊在一起的情況(這個所謂的高度在網頁中是不存在的，就像FLASH動畫中的不同層上安排了元素，但它們在看時不會有深度感覺)。可見絕對定位的對象參考目標是它的父級，專業稱之為包含塊。?
(2)自私的相對定位(relative)?
相對定位一個最大特點是：自己通過定位跑開了還占用著原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨立，做什么事它自己說了算，要定位的時候，它是以自己本身所在位置偏移的(相對對象本身偏移)。再拿前邊作比如來解，那么此時西瓜似乎是有魔法的，如果西瓜通過相對定位在水桶中偏移了你會看到一個現實生活中不存在的現象：水中有一個地方水凹下去了，周圍的水不能填補它，西瓜看起來在旁邊，如果攪動一下桶中的水，那個凹的位置會發現改變(文本流對相對定位對象還存在影響)，但是凹處到西瓜出現的距離始終保持一致。可見文本流與它之間還會互相影響，因為對象并沒有真正脫離文本流，就像有兩個人在同一層樓水平移動的過程中會有碰頭的機會。?
(3)總結兩種定位的特征?
絕對定位就像是把不同對象安排到了一棟高樓的不同樓層(一般指不是第一層，我們這里理解為文本流就放在首層)，它們互不影響，但是它們怎么移動與你樓的地基和面積(父級)有關。相對定位指對象還是在首層樓與文本流一起存放，它們之間肯定存在影響。?
(4)對特殊情況的補充?
在用相對定位和絕對定位的時候，有一種情況是它們的定位值用到了負值則對象可沿相反方向移動，剛才說到的把對象安排在一棟樓的不同層，如果某個對象一開始就是背靠著最外邊墻的，此時再用一個負值定位它，它就會神奇般地跑出墻外去了，當然現實中可沒有這種驚險而又神奇的事發生，本人只為了延用上面的比如作形象解釋。

總結

以上是生活随笔為你收集整理的详解CSS的相对定位和绝对定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。