也就是说absolute元素浏览器是怎么找到最终位置的呢?
css核心:Containing Block
包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。简单地说就是定位参考或者坐标参考系。元素一旦定义了定位显示,无论是相对,绝对或者固定,都具有包含块的性质,它所包含的定位元素都将以包含块为坐标系进行定位和调整。
一个元素的containing block,由position属性确定:
1,static:默认,relative,简单说就是他的父元素的内容框,即去掉padding部分。
2,absolute:向上找最近的absolute/relative定位的元素。
3,fixed:它的contacining block一律为根元素(html/body),根元素也是initial containing block.
结语:如果有错误或不足,恳请指出。如果有用的话,请多多点赞和关注吧,谢谢了!