绝对定位元素脱离父容器是因为父元素未设置非static定位，导致其相对于最近的已定位祖先或视口定位；解决方法是为父元素设置position: relative等非static值，以建立定位上下文，使子元素正确相对于父容器定位。
当使用 CSS 绝对定位（position: absolute）的元素脱离父容器并相对于视口或其他祖先元素定位时，通常是因为其父元素没有设置合适的定位上下文。要让绝对定位元素正确地相对于父容器定位，必须确保父元素的 position 属性不是 static（默认值）。
为什么绝对定位元素会脱离父容器？
position: absolute 的元素会相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。如果所有祖先都是 position: static（默认），则该元素会一直向上查找，最终可能相对于初始包含块（通常是视口）定位，从而“脱离”视觉上的父容器。
解决方法：为父元素设置非 static 定位
为了让绝对定位子元素被限制在父容器内，需要给父元素设置如下之一：
position: relativeposition: absoluteposition: fixedposition: sticky
最常见的是使用 relative，因为它不会让父元素脱离文档流，同时能建立新的定位上下文。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.parent {
position: relative; /* 关键：创建定位上下文 */
width: 300px;
height: 200px;
background-color: #eee;
}
.child {
position: absolute;
top: 10px;
right: 10px;
}
我相对于父容器定位
常见场景与建议
以下情况容易忽略父元素的定位设置：
- 模态框、下拉菜单、提示气泡等组件未正确贴靠目标容器
- 响应式布局中元素错位
- 使用 Flex 或 Grid 布局的父容器仍需额外添加
position: relative
即使父容器是 flex item 或 grid item，如果没设置 position，也不会成为绝对定位的参照物。
基本上就这些——只要记住：想让 absolute 元素相对于谁，就给谁加一个非 static 的 position。不复杂但容易忽略。
