用 position: absolute 布局多列需先设父容器 position: relative 作为定位基准，子元素用 px/rem 精确设置 left/top，避免用 % 或 float；注意 z-index 需配合父容器建立层叠上下文，且 relative 父容器高度塌陷属正常，按需手动设高或撑开。
绝对定位怎么让多列元素不重叠
用 position: absolute 布局多列，核心不是“把每个元素随便定个 left”，而是先确保父容器有 position: relative——否则所有 absolute 元素会相对于最近的已定位祖先（可能是 body），坐标完全失控。
常见错误现象：left: 100px 在不同屏幕下列宽错乱、元素堆叠在左上角、拖动滚动条时位置飘移。
- 父容器必须显式设
position: relative，哪怕它没宽高也要加（否则某些浏览器会忽略后代的absolute相对基准） - 子元素用
top/left定位时，数值建议用px或rem，避免用%—— 因为父容器若没设宽高，left: 20%会按视口算，不是按父容器 - 如果列数固定且宽度一致，直接写死
left值更稳；比如三列等宽，可设left: 0、left: 200px、left: 400px
为什么不能直接用 float 替换 absolute
浮动（float）本质是文本流内的“借位”，而 absolute 是彻底脱离文档流。替换不是语法切换，是布局逻辑重设计。
使用场景：当需要精确控制某几列的垂直对齐（比如一列顶部、一列居中、一列底部），或要实现非线性排列（如右上角工具栏 + 左侧导航 + 中间内容区），float 就力不从心了。
立即学习“前端免费学习笔记（深入）”；
-
float元素仍占据原始文档流空间（需清除浮动），absolute则完全不占位，父容器高度可能塌陷——得手动设高或用其他方式撑开 - 响应式下，
float可通过width+min-width自适应，但absolute的left值基本没法响应式，除非配合 JS 或媒体查询硬切 - IE8+ 支持
absolute没问题，但老项目若还依赖float清除 hack（如zoom: 1），强行替换成absolute可能导致原有清除逻辑失效
absolute 多列时 z-index 不生效？
不是 z-index 失效，是层叠上下文（stacking context）没建对。只有当父容器有 position 且 z-index 不为 auto 时，子元素的 z-index 才在该上下文内比较。
错误现象：明明写了 z-index: 10 和 z-index: 1，但视觉上顺序没变。
- 检查父容器是否同时满足：
position: relative+z-index设为具体值（如z-index: 0），否则子元素的z-index会和body层叠上下文比，结果不可控 - 避免给多个同级
absolute元素都设很高z-index（如 999/9999），容易后续覆盖困难；推荐小步递增，如10、20、30 - 如果某列需要 hover 浮层，别只给浮层设
z-index，它的直接父容器（即那个absolute元素）也得有z-index，否则浮层可能被其他列压住
relative 容器高度塌陷怎么办
设了 position: relative 的容器，里面全是 absolute 子元素时，容器高度会变成 0——因为 absolute 元素已脱离文档流，父容器“看不见”它们。
这不是 bug，是预期行为。解决方式取决于你是否真需要容器撑开高度：
- 如果容器只是定位基准，不需要视觉高度，就不用管；加个
height: min-content反而多余 - 如果必须撑高（比如要加边框、背景色、或作为某个 flex/grid 父项的子项），得手动设
height或min-height，或者用伪元素模拟占位：&::before { content: ""; display: block; height: 300px; } - 千万别为了撑高去加
overflow: hidden或padding-bottom等 hack——这些会干扰定位计算，尤其在缩放或动态内容下容易错位
position: absolute，而是想清楚哪些尺寸该写死、哪些该留白、以及谁来负责撑高——这些决定一旦做错，后面调样式的时间是写代码的三倍。 
