脱离文档流定位会影响父元素高度吗？

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

因为设置了position: absolute，元素会完全脱离文档流，其父元素在计算高度和宽度时看不见它——就像它不存在一样。此时，父元素的高度和宽度只由其他未脱离文档流的子元素决定。

常见现象：父容器设置了 border 或 background-color，但实际渲染出来是“一条线”或完全不可见，就是因为内部只有绝对定位子元素。

• 绝对定位元素不再参与父元素的 height、min-height 计算
• 父元素若无其他内容（如文本、块级非定位子元素），其高度会退化为 0
• 即使给绝对定位子元素设了 top/bottom，也不改变父元素布局盒尺寸

relative 和 fixed 定位对父元素高度的影响差异

position: relative 不脱离文档流，所以不影响父元素高度计算；而 position: fixed 脱离文档流且相对于视口定位，同样会导致父元素“忽略”该元素。

注意：fixed 元素的父容器甚至不一定是其 DOM 父级——它的包含块是视口，因此和父元素高度更无关系。