不推荐大量使用 CSS 定位布局，因其脱离文档流导致父容器高度塌陷、响应式适配困难、z-index 层叠易失控，且相比 Flex/Grid 缺乏自动伸缩、对齐和内容自适应能力。
不推荐大量使用 CSS 定位布局（尤其是 position: absolute 和 position: fixed），核心原因确实是维护成本高，且天然不利于响应式设计。
定位导致布局脱离文档流，父容器高度塌陷
绝对定位和固定定位的元素完全脱离文档流，不再占据原始空间。这意味着：
- 父容器无法自动包裹这些元素，常出现高度为 0 的“塌陷”问题
- 必须手动给父容器设高度、或用其他方式（如伪元素清除、min-height 等）补救
- 当内容动态增减时，极易错位或遮挡，需反复调整 top/left 值
像素级偏移难以适配多设备尺寸
定位依赖具体数值（如 top: 24px; left: 120px），这类绝对单位在响应式场景中非常脆弱：
- 手机屏幕下，24px 可能压住标题；大屏下又显得太远
- 用百分比或视口单位（
vw/vh）虽可缓解，但计算复杂、易出偏差 - 媒体查询中需为每套定位值单独重写，断点一多，样式表迅速膨胀
z-index 层叠关系容易失控
多个定位元素叠加时，z-index 仅在同层叠上下文中生效。实际项目中常见问题包括：
立即学习“前端免费学习笔记（深入）”；
- 误以为 z-index 全局有效，结果弹窗被导航栏遮住
- 为解决遮挡而不断调高数值（
z-index: 9999），后期难追溯、易冲突 - 父元素未创建层叠上下文（如缺
position: relative），子元素 z-index 失效
与 Flex/Grid 等现代布局方式相比，扩展性差
定位适合局部微调（如图标标注、悬浮按钮），但不适合构建整页结构：
- 无法自动分配剩余空间，也不能根据内容伸缩或换行
- 不支持对齐控制（如居中、等分布局），需靠偏移值硬凑
- 无法响应内容变化——文字变长、图片加载延迟，都可能导致定位错位
