包含块

包含块是一个参照系矩形，当一个元素需要计算自己的大小或者位置的时候，需要根据这个参照矩形来进行计算

A1. 要素 (核心零件)

1. 子元素 (Descendant)： 需要定位或定尺寸的那个元素。
2. 定位属性 (position)： 子元素的 position 属性（fixed, absolute, static, relative）决定了它去认谁做“干爹”（包含块）。
3. 祖先元素 (Ancestor)： 潜在的包含块候选人。

A2. 结构 (核心规则 - 也是最容易错的地方) 包含块是谁？完全取决于子元素的 position：

• 情况 1：普通大众 (static / relative)

  • 认亲规则： 包含块就是最近的祖先块元素的内容区域 (Content Box)。
  • 白话： 乖乖听亲爹的话。

• 情况 2：绝对定位 (absolute)

  • 认亲规则： 包含块是最近的、且 position 不是 static 的祖先元素的内边距区域 (Padding Box)。
  • 白话： 亲爹如果没本事（是 static），就往上找爷爷，直到找到一个有地位（relative/absolute/fixed）的长辈为止。如果大家都平庸，就以初始包含块（通常是浏览器窗口的第一屏）为准。

• 情况 3：固定定位 (fixed)

  • 认亲规则： 包含块通常是视口 (Viewport)（也就是浏览器窗口本身）。
  • 特例（MDN 重点）： 如果某个祖先元素具有 transform、filter 或 perspective 属性（且值不为 none），那么这个祖先就会意外地成为 fixed 元素的包含块。这是 90% 的固定定位失效 Bug 的来源。

A3. 系统 (涌现功能) 这套机制确立了 CSS 的局部坐标系。它允许你在一个小的组件内部（比如一个弹窗）进行绝对布局，而不用担心受到外部页面滚动或缩放的影响。