父容器高度塌陷时应设 position: relative 激活定位上下文，使 absolute 子元素相对于它定位；父容器需有明确尺寸或由其他非 absolute 内容撑开，不可依赖 absolute 元素反向撑高。
absolute 元素脱离文档流，父容器高度塌陷怎么办
使用 position: absolute 后，元素不再参与文档流，导致父容器无法感知其尺寸，常见表现为父容器高度变成 0 或内容“消失”。这不是 bug，而是 CSS 规范行为。关键不是阻止脱离，而是让脱离有依据——即明确它的定位上下文（containing block）。
为什么 relative 父容器能成为定位上下文
CSS 规定：position: relative、absolute、fixed 或 sticky 的祖先元素（最近的那个），会成为 absolute 子元素的包含块（containing block）。单纯用 div 不行，必须显式设置 position: relative（哪怕不写 top/left 等偏移）。
-
position: static（默认值）的父元素永远不能作为 containing block -
position: relative不改变元素在文档流中的位置，但激活了定位上下文能力 - 如果父元素同时设了
overflow: hidden且子元素超出，可能意外裁剪absolute内容
如何正确设置 relative + absolute 组合
目标是让 absolute 元素相对于父容器定位，同时不破坏父容器自身布局表现。核心是：父设 relative，子设 absolute 并用 top/right/bottom/left 显式控制位置。
- 父容器必须有明确宽度/高度，或内部有其他非 absolute 内容撑开尺寸
- 避免对父容器同时设
height: 0或min-height: 0（尤其 Flex/Grid 子项中） - 若父容器本身是 Flex 项目，注意
align-items可能影响absolute子元素的垂直对齐感知 - 不要依赖
absolute元素反向撑开父容器高度——它做不到
.container {
position: relative; /* 激活 containing block */
padding: 16px;
border: 1px solid #ccc;
}
.overlay {
position: absolute;
top: 8px;
right: 8px;
background: #ff6b6b;
color: white;
padding: 4px 8px;
font-size: 12px;
}容易被忽略的嵌套层级和 z-index 问题
absolute 元素的层叠顺序（z-index）只在**同一个定位上下文内**生效。如果两个 absolute 元素属于不同 relative 父级，它们的 z-index 不直接比较，而是先比父级的层叠上下文顺序。
立即学习“前端免费学习笔记（深入）”；
- 父级没设
z-index（或为auto），则按 HTML 顺序堆叠 - 父级设了
z-index: 1，就创建了新层叠上下文，其所有后代都局限在这个上下文中排序 - 移动端 Safari 对
z-index在transform元素上的行为有兼容性差异
真正麻烦的不是定位本身，而是当多个 relative 父级嵌套时，你改的到底是哪一层的上下文——检查 computed styles 里的 “Containing Block” 最可靠。
