你所不知道css世界的absolute

最近在惡補css的東西，也是和大家分享下position:absolute的巨大用處，先說下大家都很熟的，設定這個屬性後，其display計算值就變成block，然後會破壞正常的流特性。現在說一下兩個實用性很強的知識點。

1.具有相對i特性的無依賴absolute絕對定位

一個絕對定位元素，沒有設定任何的left/right/top/bottom,而且其祖先元素全部都是非定位元素，其位置會在哪裡呢，大家會覺得設定position:absolute,必須跟着給父元素一個相對定位，設定相關的left/top，還有z-index等。這是非常嚴重的認知和使用錯誤了，請記住：absolute是非常獨立的css屬性，其樣式和行為表現不依賴其他任何css屬性就可以完成了。

比如實作一個左上角logo的标記，很多人包括我以前也會這樣寫：

.father{
position:relative;
}
.logo{
           

position:absolute:
top:0;left:0;
}
           

實際上一句css就可以，而且相容性好，直接是：

.logo{
position:absolute
}
           

無依賴絕對定位，本質上就是“相對定位”，僅僅是不占據css流的尺寸空間而已。這個可是大有用處，比如那些各類圖示的定位，配合margin,簡直是完美，包括ie6在内的浏覽器都是相容良好的。貼下代碼，

.icon{
position:absolute;
margin-left:-20px;
width:20px;height:20px;
background:url(warn.png) no-repeat center;
}
           

相比給父元素設定相對定位的代碼更加簡潔，容錯性更強，維護成本更低。還有一些下拉框，表單後面的提示語等等，大家可以去試試。

2.absolute實作垂直水準居中

這是利用到absolute的流體特性，但是在特殊條件才會有，“對立方向同時發生定位的時候",

<div class="box"></div>
.box{
position:absolute:
right:0;left:0;
}
           

你們可以試下設定對立定位屬性的絕對定位元素，你會發現它神似普通的<div>元素，無論設定padding還是margin,其占據的空間一直不變，變化的是content box的尺寸，這就是典型的流體表現特性。是以就有了很帥氣的垂直水準居中：

如果不用管ie7浏覽器的話，這種絕對定位元素水準居中的方法可以淘汰：

.element{
width:300px;height:300px;
position:absolute;left:50%;top:50%;
margin-left:-150px;
margin-top:-150px;
}
           

很多情況下用transform配合絕對定位，但是會讓ios微信閃退，還是要盡量避免好。

.element{width:300px;height:300px;
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%)
}
           

首推的方法是利用絕對定位元素的流體特性配合margin:auto,很負責任的告訴大家這種方法吳姐：

.element{
width:300px;height:300px;
position:absolute;
left:0;top:0;rigth:0;bottom:0;
margin:auto;
}
           

覺得有用就收藏收藏0.0