不推荐大量使用 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 等现代布局方式相比，扩展性差

定位适合局部微调（如图标标注、悬浮按钮），但不适合构建整页结构：

• 无法自动分配剩余空间，也不能根据内容伸缩或换行
• 不支持对齐控制（如居中、等分布局），需靠偏移值硬凑
• 无法响应内容变化——文字变长、图片加载延迟，都可能导致定位错位