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配合完成水平居中，只要肯捣鼓