CSS 包含块（Containing Block）

/* 场景1: 子元素相对于父元素居中 */
.parent {
  position: relative;
  width: 400px;
  height: 300px;
}

.child {
  position: absolute;
  width: 50%; /* 相对于父元素（包含块）的宽度 */
  height: 50%; /* 相对于父元素（包含块）的高度 */
  top: 25%; /* 相对于父元素顶边偏移 */
  left: 25%; /* 相对于父元素左边偏移 */
}

/* child的包含块是father的内容区域 */
/* child的宽度 = father的内容宽度 × 50% = 400px × 50% = 200px */

/* box的包含块是container的padding box */
/* box的宽度 = 500px × 50% = 250px */
/* top、left 相对于 container 的 padding 区域边缘计算 */

/* child 向上查找第一个 position 不是 static 的祖先 */
/* 找到的是 grand，所以包含块是 grand */
/* child 的宽度 = 800px × 50% = 400px */
/* 注意：跳过了 parent，因为它是 static 定位 */

/* 如果没有任何定位祖先，包含块是初始包含块 */
/* 通常是视口（viewport）大小 */
/* box 的宽度 = 视口宽度 × 50% */

/* header 的包含块是视口 */
/* width: 100% = 视口宽度的 100% */
/* top: 0 相对于视口顶部 */

/* 注意：当祖先元素有 transform 属性时 */
/* fixed-box 的包含块变成了 container，而不是视口！ */
/* 这是一个常见的"陷阱" */

/* sticky-header 的包含块是 scroll-container */
/* 在滚动容器内滚动时，会粘在距离顶部 0 的位置 */

/* 相对定位：包含块是父元素的内容区域 */
/* child 宽度 = 400px × 50% = 200px */
/* child 高度 = 300px × 50% = 150px */

/* box 的 padding-top = 400px × 50% = 200px （注意是相对宽度！） */
/* box 的 margin-bottom = 400px × 25% = 100px （注意是相对宽度！） */

/* 这个特性常用于创建固定宽高比的容器 */
.aspect-ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
}

/* child 的 top = 包含块高度 × 10% = 300px × 10% = 30px */
/* child 的 left = 包含块宽度 × 20% = 400px × 20% = 80px */

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.modal {
  position: absolute;
  width: 80%; /* 相对于 container 宽度 */
  max-width: 600px;
  height: 60%; /* 相对于 container 高度 */
  max-height: 400px;

  /* 居中定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 宽高比，相对于父元素宽度 */
  overflow: hidden;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  position: relative;
  width: 100%;
  /* 使用 padding-top 创建 16:9 的容器 */
  padding-top: 56.25%; /* 9/16 = 0.5625 */
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;

  /* 内容可以自由布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page {
  position: relative;
  min-height: 100vh;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 相对于 .page 的宽度 */
  height: 100%; /* 相对于 .page 的高度 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.parent {
  /* 问题：parent 没有明确的高度 */
}

.child {
  height: 50%; /* 包含块高度未定义，百分比无法计算 */
}

/* 解决方案 */
.parent {
  height: 400px; /* 或 height: 100vh; 或 display: flex; 等 */
}

/* 问题代码 */
.parent {
  transform: translateZ(0); /* 创建了新的包含块 */
}

.child {
  position: fixed;
  top: 0;
  /* child 不再相对视口固定，而是相对 parent */
}

/* 解决方案：将 fixed 元素移到 transform 元素外 */

/* 对于 inline 元素，包含块的确定更复杂 */
/* 通常是包含该元素的块级祖先 */
/* 建议绝对定位的元素使用块级容器作为参照 */

/* 可视化包含块 */
.container {
  outline: 2px solid red; /* 显示容器边界 */
}

/* 可视化定位元素 */
.positioned {
  outline: 2px solid blue;
}