absolut絕對定位的非絕對定位用法

一、absolute絕對定位的流行用法

一般而言，我們會用absolute絕對定位做什麼呢？就是絕對定位，顧名思意，定死在某個位置上。例如，lightbox效果就是使用的絕對定位，例如新浪微博的彈出提示信息，我要轉發李冰冰姐姐的微博，結果就會彈出：

還有就是與父relative相對定位標籤結合使用，實現相對於父標籤的絕對定位效果，例如人人網的搜索下拉菜單效果：

這裏用法少不了的是left(right)絕對定位值或是top(bottom)值，否則絕對定位的位置會跟設置了left爲0，top爲0值一樣。好，我這裏特意斜體加粗，爲什麼呢？因爲這句話是不正確的，如果您沒有意識到，說明您有必要好好看看這篇文章了。

well, 可能別人不是如此，但我對position:absolute的理解，可以說很長一段時間都是不到位的，或者或是一直沒有機會好好的靜下心來研究，知道個大概，於是就會有一些錯誤的認識。其中之一就是上面提到的，position爲absolute的元素如果沒有設置left, top等值與left:0;top:0;的的效果一樣，一樣嗎？其實不一樣。

二、absolute元素的margin定位

absolute定位於margin定位似乎是冤家，某種定義上講，兩者作用一致，都可以定位，似乎兩者水火不容，競爭對手，確實，大部分情況下是，但是沒有設置定位數值的absolute元素可以通過margin來進行定位。舉個小例子吧，見下面的代碼，一張絕對定位的圖片，含margin屬性，無left,top等定值數值：
absolute定位與margin定位其實是沒有什麼衝突的，無論absolute元素時候設置了left/top值，其margin屬性值都是可以起作用的。下面展示的是沒有left/top值的absolute元素的margin定位。

<img data-src="http://image.zhangxinxu.com/image/blog/zxx_90_0824.jpg" width="90" height="111" style="position:absolute; margin:50px 0 0 50px;" />

結果如下圖：

您可以狠狠地點擊這裏：該小例子demo

可見absolute元素可以通過margin進行定位。前提就是沒有設置left或是top之類的定位數值。我是這麼理解的，對於沒有設置絕對定位值的absolute絕對定位元素並沒有脫離文檔流，依舊在demo中（可能不正確）（現糾正：此理解是錯誤的，已脫離文檔流），證據如下：我們再一個普通的div中（無任何樣式）放置一個無絕對定位值的absolute元素，這個元素依舊子啊這個div中，而沒有跑到div之外，例如如下的示例代碼：

<div style="width:200px; height:120px; background:#f0f3f9; margin:40px;"><img data-src="http://image.zhangxinxu.com/image/blog/zxx_90_0824.jpg" style="position:absolute;" /></div>

結果如下圖：

您可以狠狠地點擊這裏：該示例demo

可以說，沒有設置定位值的absolute元素是個普通又不普通的元素，普通之處在於其依舊在DOM tree中，對margin等屬性敏感；不普通在於其實際的高寬都丟失了。這非常類似於浮動(float)，浮動的本質就是“包裹與破壞”，破壞高度，浮動元素的實際佔據高度爲0（具體點這裏）；而absolute元素（無定位值）也是“包裹與破壞”，只是其“破壞”比float更加兇猛，不僅實際的高度沒有，連實際的寬度也沒有。說句不嚴謹的結論：絕對定位元素就是個比浮動元素更加變態的近親。

三、絕對定位元素的非絕對定位

從上面一部分我們可以得到兩個結論：其一，無定位值的absolute元素可以使用margin定位；其二，無定位值的absolute元素是個沒有實際寬度的浮動元素。

這兩點很重要，我們可以使用這兩個特性實現一些特別的定位效果。兩個例子，一是文字投影效果，二是自適應佈局。

文字的陰影效果
CSS3中有text-shadow屬性可以實現文字陰影效果，但是IE對CSS3的支持不佳，所以我們需要想替他的方法實現，absolute+margin是個很好很簡單的方法，見下面的效果圖，截自Firefox3.5：

相關代碼如下：

css代碼：

.zxx_show{padding:20px; background:#f0f3f9; color:#aaaaaa; font-size:14px;}
.zxx_text{position:absolute; margin:-1px 0 0 -1px; color:#333333;}

HTML代碼：

<div class="zxx_show">
    <span class="zxx_text">這是一段用來測試的文字，看看是否有投影效果~~</span>
    這是一段用來測試的文字，看看是否有投影效果~~
</div>

您可以狠狠地點擊這裏：文字投影效果demo

絕對定位元素需要寫在投影文字之前，因爲absolute元素實際佔據的高度寬度都是0，所以文字可以自然而然的在其下方顯示，由於下方的文字顏色較淺，於是便形成投影效果。此方法很精妙，可惜有小小兼容性差異，IE6下投影方向是水平朝右，IE7是右上方向，需要hack修復。

自適應佈局
沒有定位值的absolute元素是個更加變態的float元素，所以浮動元素乾的某些事情absolute元素也能做，例如自適應佈局。例如facebook動態頭像與內容描述就是使用的這個方法。

由於頭像的寬度固定，所以對於描述標籤，我們可以使用margin或是padding撐開一段距離，頭像使用無定位值的absolute定位，這樣就實現了頭像與描述的自適應佈局效果了。

例如，我的博客個人信息簡介處，現在就是使用的float自適應佈局，其實將float屬性替換成absolute，效果一樣的，見下圖：

關於absolute的自適應應用，我也做了個demo，您可以狠狠地點擊這裏：absolute自適應佈局demo

下圖爲demo效果截圖：

absolute絕對定位的非絕對定位應用肯定還有其他，只要記住無定位值的absolute元素就是個連實際寬度也沒有的float浮動元素就可以了，然後利用這個特性，發揮您的創造力，實現更多更精彩的效果吧。

四、最後的小結

最後，先回答下開始懸而位答的問題：position爲absolute的元素如果沒有設置left, top等值與left:0;top:0;的的效果爲何不一樣？相信您應該知道答案了，例如一個div中有個absolute屬性元素，其沒有left或是top值，其會像個普通的inline-block屬性元素一樣靜靜地呆在這個div裏面，但是一旦設置了left:0;top:0;對不起，這個absolute元素立馬變身，直接從DOM tree裏面脫離，獨立於文檔流，結果相對於最近的relative屬性的祖先標籤定位（如果沒有，就body定位）。由於我們平時使用absolute都離不開left，top之類的值，所以纔會概念不清。

每個CSS屬性都有一段故事，需要我們靜下心來發現，體會。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=608

（本篇完）