2020年還問position:absolute，玩點花樣？

CSS的position屬性經常被面試官拿出來考校同窗的前端基本功，分別回答幾個屬性值是static、absolute、relative、fixed、sticky並解答一些基本特性（直接百度獲得的）能夠算及格，想要進一步catch their eyes，須要更深刻的理解，這裏視角匯聚到absolute上，看看這個最具表明性的值能作多少文章。

一重天

絕對定位，top，right，bottom 和 left 屬性決定了該元素的最終位置，position:absolute經常和他們配套使用，完成對固定寬度元素的居中效果。

其實達到一重天，也足以知足一些面試官的胃口了，畢竟CSS雖然常考但不會做爲重中之重。不過若是你更進一步，讓面試官眼前一亮，你的競爭力就更加立體了。

二重天

咱們經常將絕對定位和top，right，bottom 和 left配套使用，你們都知道這種狀況下絕對定位元素是相對於第一個position不爲static的父元素定位的。因而慣性思惟，不管什麼時候，只要使用absolute，必定要將父元素設爲relative。這反而浪費了不少有趣好用的特性，不假思索的使用relative甚至會致使元素層疊順序受到潛移默化的影響（層疊問題這裏不深刻）。其實絕對定位元素在上下或左右方向沒有設置位置屬性時（未設置top、bottom或left、right）它的位置就是不設置absolute時在文檔中的位置，這點和relative挺像的，只不過仍然不佔據空間。因而乎這個相對特性能夠和margin配合，完成不少自適應的邊角位佈局，好比經典的右上角消息通知小圖標。這個特性甚至能夠和父元素的text-align:center配合完成水平居中，只要肯搗鼓，就會有驚喜。

和麪試官聊到這些，其實已經彰顯了必定功底，不過還能夠接着擴展。

三重天

絕對定位能使元素塊狀化，使得display的應用值變爲block，你們或許有所耳聞。一個元素被設爲絕對定位後，其display計算值就變爲了block，儘管其表現形式和inline-block相似——包裹內部元素且不超出包含塊的特性（網上有些說變爲inline-block的其實誤人子弟了）。按照以下方式在控制檯嘗試可驗證：

var span = document.createElement('span');
document.body.appendChild(span);
console.log('1.' + window.getComputedStyle(span).display);
span.style.position = 'absolute';
console.log('2.' + window.getComputedStyle(span).display);
輸出：
1.inline
2.block
複製代碼

到這還不完美，忽然提出應用值的概念，得防一手被追問應用值是什麼。其實CSS屬性有三個階段：指定值（specified value）->計算值（computed value）->應用值（used value）

指定值其實就是咱們熟知的CSS賦值規則：

1.在CSS文件中給屬性賦的值，優先使用。還涉及優先級比較，百度可知。

2.若是CSS文件中沒有給該屬性賦值，那麼它會嘗試從父元素那繼承一個值。

3.若是上面的兩種途徑沒獲得有效值，則把CSS規範中針對這個元素的這個屬性的初始值（initial）做爲指定值。

計算值是對指定值進行計算後獲得的結果，計算值進行的計算一般爲將相對值轉換成絕對值(如 em 單位或百分比)。

應用值是由渲染引擎根據計算值得出實際的佈局尺寸，應用到渲染的頁面上的結果。能夠經過window.getComputedStyle方法得到應用值。

計算值和應用值的區別：對於不依賴於佈局的 CSS 屬性 (例如 display, font-size, line-height)計算值與應用值同樣，不然就會不同（例如height:auto，計算值爲auto，應用值爲實際高度，是實打實的像素，如100px）。

這樣，一整個小套路差很少成型了，其實absolute的東西不止這麼多，不過以上這些在面試官面前小小裝一波也足夠了。也歡迎小夥伴和我討論更多有特點的CSS用法和黑科技。

參考資料

MDN