CSS绝对定位如何影响父容器高度及同级元素布局？

本文共计1104个文字，预计阅读时间需要5分钟。

由于设置了position: absolute，元素会完全脱离文档流，因此父容器在计算自身高度时，会直接看不到这个元素。如果子元素内容再高，父容器的高度也可能降为0（除非父容器中还有其他非定位子元素或显式高度）。

• 常见错误现象：div 设了 position: absolute 后，父 div 在 DevTools 里显示高度为 0，背景色/边框都缩成一条线
• 典型场景：下拉菜单、弹窗、tooltip —— 它们本就不该参与父容器布局，但若误用于需要撑高父容器的场景（比如侧边栏导航项），就会出问题
• 不要试图用 height: 100% 或 min-height 强行修复——父容器本身没高度，百分比值无效

同级元素怎么被绝对定位“穿透”或遮挡

绝对定位元素默认层级（z-index）为 auto，渲染顺序取决于 DOM 顺序和层叠上下文。它不占空间，但会真实绘制在其他同级元素之上或之下，造成视觉遮挡或点击失效。