absolute 的 containing block(容器块) 计算方式跟正常流有什么不同 ?
无论属于哪种,都要先找到其祖先元素中最近的 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),根元素也是 initialcontaining block
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »