一些令人困惑的疑问

我们在进行页面布局时，经常碰到以下问题：

1. width等属性设置为百分比值的时候，是相对于什么值的百分比？
2. 绝对定位(position: absolute, fixed)等是相对于什么元素进行定位？

包含块 (containing block)

作用

1. 确定元素的尺寸（如width，height，padding，margin等设置为百分比值时）
2. 定位（position为absolute, fixed时所相对定位的父元素，以及top、bottom等属性）。

如何识别当前元素所在的包含块？

先回忆下盒模型（box model）的组成，从内到外可以分为

1. content area
2. padding area
3. border area
4. margin area

我们需要根据当前元素所具有的position属性的值来分类判断其所在的包含块

当前元素为 static, relative 和 sticky 定位的情况

此时包含块是最近的块容器（常见的就是block、inline-block等块容器）或者格式化上下文（如flex容器、grid容器）祖先元素

包含块的尺寸是这个祖先元素的content area（即盒模型的最内层）

当前元素为 absolute, fixed 定位的情况

包含块为具有以下属性的最近祖先元素

1. transform不为none
2. will-change为transform 或 perspective
3. filter不为none
4. contain: paint;

特别地，当前元素为 absolute 时

包含块可以为最近的position为非static 的祖先元素，所以常见的做法是可以把希望相对定位的父元素的position设置为relative

特别地，当前元素为 fixed 时

包含块可以为当前的视口（viewport），具体的数据可以读取window.visualViewport

包含块的尺寸为包含块元素的padding area

如何根据包含块来计算百分比值？

计算 height, top 和 bottom

根据包含块的height来计算

计算width, left, right, padding 和 margin

根据包含块的width来计算

参考资料

1. Layout and the containing block
2. position