面试官想知道你多了解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