如何使用 CSS 中的 relative 定位实现元素居中堆叠-html教程

本文详解如何借助 `position: relative` 配合 `left`/`top` 偏移，使多个元素在父容器内精确居中并垂直堆叠显示，而非默认流式排列。

在 CSS 中，position: relative 并不会将元素脱离文档流，而是基于其原本的自然位置进行偏移。这意味着：每个 .square 仍会先按普通文档流依次排列（从上到下、从左到右），然后各自再根据 left、top 等属性相对于自身原始位置移动。因此，若希望多个元素“视觉上完全重叠并居中”，仅靠 relative + 绝对数值偏移（如 left: 50%; top: 20%）往往不够精准——因为它们原始位置不同，偏移后仍可能错开。

✅ 正确做法是：先让所有子元素在父容器中“起点一致”，再统一偏移居中。推荐组合方案如下：

1. 父容器设为相对定位上下文（可选但推荐），并确保有明确尺寸；
2. 子元素设 position: relative，同时用 transform: translate(-50%, -50%) 配合 left: 50%; top: 50% 实现真正居中（更健壮，不受宽高影响）；
3. 若需严格堆叠（完全重合），还需添加 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;
}

⚠️ 注意事项：