[!info] CSS 定位详解 - 阮一峰的网络日志
本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。
https://www.ruanyifeng.com/blog/2019/11/css-position.html

绝对定位和相对定位

🎯 1. `position: relative`（相对定位）

定义： 元素相对于它==原本在文档流中的位置==进行偏移（使用 top / left / right / bottom）。 特点：

元素仍保留在原来的文档流中（不会影响其他元素的位置布局）。
偏移只是“视觉上”移动，不改变其占位空间。
通常用于设置“参考定位容器”给绝对定位的子元素使用。 示例：

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

这会让 .box 元素在原来位置基础上向下偏移 10px，向右偏移 20px。

📍 2. `position: absolute`（绝对定位）

定义： 元素相对于==最近的有定位父元素==进行定位（即最近的 position 是 relative / absolute / fixed / sticky 的祖先）。 特点：

元素脱离文档流，不会占据原来的空间，可能导致其他元素“塌陷”或重叠。
如果找不到有定位的父元素，则会相对于 **<html>** 或 **<body>** 定位（即整个页面）。
用于需要精确摆放的元素（如浮层、弹窗、提示框等）。 示例：

.container {
  position: relative;
}
.popup {
  position: absolute;
  top: 0;
  left: 0;
}

这里 .popup 会以 .container 左上角为参考点定位。

✅ 对比总结

特性	relative	absolute
是否脱离文档流	否	✅ 是
定位参考对象	元素原本位置	最近的定位祖先元素（无则为 `<html>`）
是否保留空间	✅ 是	否
常用场景	小幅微调、设置定位参考容器	弹窗、悬浮按钮、下拉菜单、精准布局元素等

✅ 提示

如果你用 absolute 把一个元素放在页面中的某个位置但位置错乱了，先检查它的父元素是否设置了 **position: relative**。否则它会默认相对整个页面定位。

定位居中的方法

CSS 使用绝对定位（`position: absolute`）实现元素水平垂直居中有几种常见的方法，以下是详细流程与对比：

✅ 方法一：`top/left 50% + transform translate`（最推荐）

现代浏览器兼容良好，不依赖已知尺寸，是最灵活、响应式友好的方法：

.parent {
  position: relative; /* 确保定位参考是父容器 */
}
.child {
  position: absolute;
  top: 50%;
  left: 50%; //相对父元素
  transform: translate(-50%, -50%); //50%相对当前元素
}

top:50% 和 left:50% 将子元素的左上角移动到父容器中心；
transform: translate(-50%, -50%) 将子元素本身向上和向左移动自身宽高的一半，使其完全居中。这种方式无需知道元素尺寸，适合动态内容与响应式场景。

方法二：`margin: auto`

这种方法需设定宽高，利用 margin:auto 在父容器边界里自动居中：

.child {
  width: 300px;
  height: 200px;
  margin: auto;
}

子元素填充父容器的所有边界后，自动水平垂直居中；
支持百分比尺寸、自适应布局；
缺点：==必须明确设置宽度与高度==，元素必须有明确的宽度（不能是 width: auto，否则占满容器宽度，就没“剩余空间”可居中）。

🔍 方法对比总结

方法	是否依赖尺寸	兼容性	优点	缺点
top/left + transform	否	IE9+、现代浏览器	灵活响应式、无需知道尺寸	少数旧浏览器兼容问题
margin + 全边设0	是	现代浏览器	自动居中、自适应百分比布局	必须明确宽高，有局限