CSS 查缺补漏 3（包含块 / 尺寸百分比 / 定位）

包含块（containing block）

• 普通元素的参考系是父元素的内容区域。

• 绝对定位的元素参考系为最近定位祖先（position != static）的 padding + content 区域。

• 固定定位元素参考系为视口（除非祖先有 transform/filter/perspective 创建了新的包含块）

尺寸百分比

padding，margin 通常不会设置百分比，如果设置则是相对于包含块的宽度。包括padding-top 和 margin-top 也参考宽度而不是高度。

border 不能用百分比。

height 的百分比：如果父元素没有显式高度（或高度由内容撑开），百分比会失效。但 flex/grid 容器中例外。

transform: translate(50%) —— 参考的是元素自身尺寸。

定位

五种定位：

• static：标准文档流。left/right/top/bottom 不生效。

• relative：基于标准文档流偏移，通常用来微调位置或给绝对定位提供参考系。

• absolute：基于包含块定位，会脱离文档流，元素 display 会变为 block。

如果父级元素没有定位元素，包含块是 initial containing block（即 HTML 元素的 content 区，尺寸等于视口，原点在文档左上角）。如果此时设定 bottom，是基于首屏窗口计算下间距。

• fixed：基于包含块定位，会脱离文档流，如果是屏幕设备则基于 viewport（视口），如果是打印机则每页都有。

• sticky：它的参考系是最近的滚动祖先（scrolling ancestor）。如果没有任何滚动祖先，则是 viewport。

  需要指定阈值。