子元素设置 position: absolute 会导致父元素的 margin 失效，是因为绝对定位的子元素脱离了标准文档流，不再参与父元素的正常高度计算。当父元素内部没有非定位的块级内容撑开高度时，其高度会塌陷为 0（或仅由边框/内边距决定），导致父元素的上下外边距无法按预期推开相邻元素。
为什么 margin 不生效？
这是因为 absolute 定位的元素完全脱离文档流，父容器在计算高度时会忽略它。如果父元素没有其他内容，其高度变为 0，此时设置的 margin-top 或 margin-bottom 实际上是在一个高度为 0 的盒子上操作，视觉上看起来就像“失效”了。
<div class="parent">
<div class="child">Absolute Child</div>
</div>
<style>
.parent {
position: relative;
background: #f0f0f0;
margin-top: 50px; /* 这个 margin 可能不会如预期推开上方元素 */
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: blue;
}
</style>如何修复这个问题？
要解决父元素 margin 失效的问题，最直接的方法是给父元素添加一个非定位的子元素来撑开高度，或者使用伪元素。这样父元素就有了实际的高度，margin 就能正常作用于布局中。
立即学习“前端免费学习笔记（深入）”；
<div class="parent">
<div class="child">Absolute Child</div>
<div class="spacer"></div> <!-- 用于撑开高度的空元素 -->
</div>
<style>
.parent {
position: relative;
background: #f0f0f0;
margin-top: 50px;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: blue;
}
.spacer {
height: 100px; /* 与子元素高度一致 */
}
</style>基于具体输入条件的验证
当父元素设置了 padding 但没有内容时，margin 依然可能表现异常，因为 padding 虽然撑开了盒子，但 margin 的折叠行为在高度为 0 的边界上可能不符合直觉。通过添加显式高度或使用 display: flex 可以确保布局稳定。
