本文详解如何借助 `position: relative` 配合 `left`/`top` 偏移，使多个元素在父容器内精确居中并垂直堆叠显示，而非默认流式排列。
在 css 中，position: relative 并不会将元素脱离文档流，而是基于其原本的自然位置进行偏移。这意味着：每个 .square 仍会先按普通文档流依次排列（从上到下、从左到右），然后各自再根据 left、top 等属性相对于自身原始位置移动。因此，若希望多个元素“视觉上完全重叠并居中”，仅靠 relative + 绝对数值偏移（如 left: 50%; top: 20%）往往不够精准——因为它们原始位置不同，偏移后仍可能错开。
✅ 正确做法是：先让所有子元素在父容器中“起点一致”，再统一偏移居中。推荐组合方案如下：
- 父容器设为相对定位上下文（可选但推荐），并确保有明确尺寸；
- 子元素设 position: relative，同时用 transform: translate(-50%, -50%) 配合 left: 50%; top: 50% 实现真正居中（更健壮，不受宽高影响）；
- 若需严格堆叠（完全重合），还需添加 margin: 0 和 box-sizing: border-box 避免边框/内边距干扰。
示例代码：
.postest { width: 100%; height: 100vh; position: relative; /* 提供定位参考（非必需，但语义清晰） */ } .square { width: 100px; height: 100px; border: 1px solid blue; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 关键：抵消自身宽高一半，精准居中 */ margin: 0; box-sizing: border-box; } ⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- left: 50% 是相对于父容器宽度的 50%，transform: translate(-50%, -50%) 则相对于元素自身宽高的 50%，二者结合才能实现绝对居中；
- 不要依赖 top: 20% 这类随意值——它会导致纵向偏移不一致，破坏堆叠效果；
- 若需差异化布局（如错位叠加、Z 轴分层），可额外使用 z-index 控制层叠顺序；
- relative 适合微调或动画起始状态；若目标是彻底脱离流式布局并自由定位，应考虑 position: absolute（需父级设 position: relative）。
总结：relative 的本质是“原地偏移”，不是“自由定位”。要实现多元素中心堆叠，核心在于统一基准点 + 精确抵消，而 transform 是达成这一目标最可靠、响应式友好的方式。