absolute 的 containing block 计算方式跟正常流有什么不同？
containing block（包含块）
一般来说，盒子本身就为其子孙建立了 包含块，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 包含块来计算，需要分情况来讨论：
若此元素为 inline 元素 则包含块为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则则由这个祖先元素的 padding box 构成。
对于 position 为 static 或 relative 的元素，其包含块为祖先元素中最近的块容器盒的内容区域 (除 margin, border, padding 外的区域)；
对于 position:fixed 的元素，其包含块由 viewport（视图窗口） 建立；
对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断：如果都找不到，则为初始化包含块（ initial containing block）。
根元素所在的包含块被称为 初始化包含块（initial containing block），在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；
经典总结
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。
如果都找不到，则为 initial containing block。
补充：
static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
