面试官想知道你多了解position:absolute | 掘金技术征文

2,319 阅读4分钟

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