absolute定位元素脱离文档流是因为它被浏览器从正常布局中移除，不占空间、不影响兄弟元素，仅按偏移值浮动定位；其定位基准依赖最近已定位祖先，否则相对于html，且z-index仅在同层叠上下文中生效。
absolute定位元素为什么会脱离文档流
因为position: absolute会让浏览器把该元素从正常布局流程中“拿掉”，它不再参与父容器的高度计算、不占空间、也不影响兄弟元素的位置。其他元素就像它不存在一样继续排布，而它自己则按top/left等偏移值“浮”在页面上——自然就可能盖住后面渲染的元素。
常见错误现象：div设了absolute后，下方文字直接顶到顶部，仿佛上面的盒子消失了；或者卡片堆叠时内容被遮得只剩一角。
- 即使没写
z-index，absolute元素默认层叠顺序也高于普通流内元素（相当于隐式z-index: auto） - 如果父容器没设
position: relative等已定位属性，它会相对于或视口定位，极易逃逸出预期区域 -
absolute元素的宽高若未显式设置，会收缩为内容尺寸（即“包裹性”），但它的定位原点仍是父级左上角，容易和相邻元素错位重叠
z-index不起作用的典型原因
z-index只对已定位元素生效，且必须在同一个层叠上下文（stacking context）里比较才有意义。很多覆盖问题其实不是z-index没设，而是它根本没生效。
使用场景：模态框弹出时被导航栏盖住、角标被卡片内容挡住、下拉菜单被轮播图截断。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器没有创建层叠上下文（比如没设
transform、opacity 、<code>filter等），导致子元素的z-index被限制在局部，无法和外部元素比高低 - 两个元素不在同一层叠上下文中——例如导航栏是
fixed且父级有transform，而弹窗是absolute且父级只是relative，它们的z-index互不干扰 - 写了
z-index: 999但祖先元素有z-index: 1（且创建了新层叠上下文），子元素再大也突破不了这个“天花板”
父容器没设relative导致定位基准错乱
这是最常被忽略的实操坑：没给absolute元素的**直接父容器**加position: relative，结果元素不是“钉”在卡片右上角，而是飞到整个页面左上角，甚至盖住头部导航。
参数差异：relative本身不改变布局位置（除非配top/left），但它唯一作用就是为后代absolute提供定位锚点。
- 只给孙子级设
absolute，跳过父级？它会一路往上找，直到遇到relative/absolute/fixed，否则落到 - 父容器高度为
0（比如只有absolute子元素），即使写了top: 10px，它也会叠在兄弟元素上方，因为父容器根本没撑开空间 - 多个
absolute子元素想并排？光靠left: 20px、left: 40px不可靠，要配合父容器width和overflow: hidden来约束边界
fixed与absolute混用时的层级陷阱
固定定位fixed和绝对定位absolute都脱离文档流，但fixed始终相对于视口，absolute则依赖祖先。当两者共存，且z-index数值接近时，谁在上层取决于它们是否属于同一层叠上下文，而不是谁“更固定”。
性能 / 兼容性影响：iOS Safari 对含transform的层叠上下文处理较敏感，有时z-index表现异常；Chrome 中will-change: transform可能意外创建新层叠上下文，打断预期层级。
- 导航栏用
fixed，弹窗用absolute，但弹窗父容器有opacity: 0.99→ 弹窗被锁在局部上下文里，再大的z-index也盖不过导航栏 - 不要依赖“
fixed一定在absolute上面”这种直觉——实际由最近共同祖先的层叠上下文决定 - 调试时用浏览器开发者工具的“Layers”面板看真实层叠结构，比数
z-index数字更可靠
absolute元素是否被盖住，往往不是它自己z-index太小，而是它被某个看不见的祖先“关进小黑屋”了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
