为什么 CSS 绝对定位元素会脱离父容器？
定位原理
在 CSS 中，绝对定位会把元素从普通文档流中移除，并通过 top、right、bottom、left 等属性进行定位。定位参照的对象是最近的非静态定位祖先，如果没有这样的祖先，定位参照就会变成初始包含块，通常是视窗（浏览器的可视区域）而非父容器。
因此，当父容器没有设置非静态定位（例如使用 position: static，这是默认值）时，绝对定位的子元素可能会以视口为参考点，从而看起来像是脱离了父容器。
实际示例
下方示例展示了如果父容器未设置非静态定位，绝对定位的子元素会相对于视口定位，从而与父容器的定位无关。注意区分“父容器”和“定位参考块”的关系。
<div class="parent"><div class="child">定位元素</div>
</div>.parent {width: 320px;height: 180px;border: 1px solid #333;/* 默认：position: static; 没有非静态定位祖先 */
}
.child {position: absolute;top: 20px;left: 20px;width: 120px;height: 60px;background: #4a90e2;
}上面的代码中，父容器没有设置定位上下文，因此子元素的定位参照是视口而不是父容器，出现“脱离父容器”的现象。
/* 解决前的对比：父容器静态定位，子元素相对视口定位 */
.parent { width: 320px; height: 180px; border: 1px solid #333; }
.child { position: absolute; top: 20px; left: 20px; }/* 解决后的对比：给父容器设置非静态定位，子元素相对父容器定位 */
.parent { position: relative; width: 320px; height: 180px; border: 1px solid #333; }
.child { position: absolute; top: 20px; left: 20px; }通过将父容器改为非静态定位（如 position: relative;），就能让绝对定位的子元素以该父容器为参照点，从而不再脱离父容器。
如何通过设置父元素为非 static 来解决
第一步：确认定位祖先
首先使用浏览器的开发者工具检查绝对定位元素，定位参考点是否来自某个父级元素，并确认该父级是否是静态定位（position: static）。
如果没有定位参照，需要找到一个合适的父元素来成为定位上下文，以确保子元素的定位能稳定地保留在期望的容器内。
第二步：应用非静态定位
将目标父元素设置为非静态定位，常用做法是给父元素添加 position: relative;。这样子元素的绝对定位就会相对于该父元素进行。
/* 应用示例：父容器设为非静态定位 */
.parent { position: relative; width: 320px; height: 180px; border: 1px solid #333; }
/* 子元素仍然是绝对定位，参照父容器 */
.child { position: absolute; top: 20px; left: 20px; width: 120px; height: 60px; }通过上述方式，绝对定位元素将保持在父容器内的可预期位置，实现稳定的布局。
第三步：考虑其他场景与兼容性
如果你无法修改父容器的定位状态，可以考虑将需要定位的子元素放在一个新的包裹层中，并对该包裹层设置非静态定位。这是一种在不改变原有结构的情况下实现正确定位的替代方案。
此外，某些情况下祖先元素的 transform、filter、perspective 等属性也会影响包含块的计算，请在调试时将这些因素纳入考量，以确保定位行为符合期望。
总结要点：绝对定位的定位参照是最近的非静态定位祖先，若没有这样的祖先，子元素会相对于视口定位，从而看起来“脱离”父容器。通过将父元素设为非静态定位（通常是 position: relative;）即可将绝对定位的子元素重新锚定到该父容器，确保布局的稳定性。
