position: relative 本身不引起偏移，必须配合 top/right/bottom/left 才生效；它建立新定位上下文、不脱离文档流、影响后续布局且支持 z-index。
relative 定位必须配合 top/right/bottom/left 才生效
很多人以为 position: relative 本身就能“让元素相对原来位置移动”，其实不是。它只是**建立新的定位上下文**，真正偏移靠的是 top、left 等偏移属性。没写这些值，relative 和默认的 static 表现完全一样。
常见错误：只写 position: relative，页面毫无变化，误以为 CSS 没生效。
- 必须显式设置至少一个偏移量，比如
top: 10px或left: -5px - 偏移值可以是正数（向右/下）、负数（向左/上），也支持
em、rem、% -
right和left同时设置时，left优先级更高（除非direction改变）
relative 不脱离文档流，但会影响后续兄弟元素布局
position: relative 的关键特性是「不脱离文档流」——它原本占的位置还在，后续元素照常排布，但**自己会从原位偏移，且可能盖住或露出下面的内容**。
容易被忽略的副作用：如果给一个 inline 元素设 relative 并加 top，它的行高、基线、换行行为都可能意外改变。
立即学习“前端免费学习笔记（深入）”；
2010-10-31日最新更正： 一、更正了产品及文章无限分类不能显示继承类别的bug. 二、更正了产品名称标题过长导致页面布局错位的bug. 随缘企业网站管理系统(无限级分类红色版)简介: 一、全站采用主流DIV+CSS框架布局,宽屏红灰主色调，简洁大方。适合各类行业作为企业站使用。 二、后台可对相关的网站标题，关键词，描述、底部版权信息等进行设置，同时可指定相关的安装目录，可在二级目录使用。
- 父容器高度不会因子元素
relative偏移而自动扩展（不像absolute那样完全不管） - z-index 在 relative 元素上有效，可用于微调层叠顺序（比如让标题浮在图片上方）
- 不要对
table-cell或某些表单控件滥用 relative，部分浏览器渲染异常
relative 常见组合场景与陷阱
实际项目中，relative 很少单独用，多用于为 absolute 子元素提供定位参考，或做小范围微调。但组合方式不对，反而引发错位。
div.container {
position: relative; /* 让 .popup 相对于它定位 */
}
div.popup {
position: absolute;
top: 100%;
left: 0;
}- 若父容器没设
position: relative（或absolute/fixed），absolute子元素会向上找最近的定位祖先，可能跑到body下，导致定位失控 - 用
relative做按钮图标偏移时，注意transform: translateY()更轻量、不影响文档流，比top更适合纯视觉调整 - 在 Flex 或 Grid 容器里对子项设
relative，偏移仍生效，但可能和主轴对齐逻辑冲突（比如align-items: center+top: 20px会叠加效果）
移动端适配时 relative 的兼容性注意点
所有现代浏览器（包括 iOS Safari 6+、Android Chrome）都完整支持 position: relative，但实际表现差异常来自缩放、视口设置或第三方库干扰。
- 在
viewport缩放后，top: 1px可能被渲染为半像素，造成模糊；建议用transform: translate()替代像素级偏移 - 某些微信内置浏览器（X5 内核）对
relative+z-index的层级计算有缓存 bug，可加will-change: transform强制重绘 - 避免在
input或textarea上直接设relative，iOS 键盘弹出时可能触发意外滚动或定位重算
relative 的本质是“锚定原位再挪动”，不是“自由漂浮”。真正麻烦的从来不是怎么写，而是没意识到它仍在参与布局计算，还悄悄影响着 z 轴和后代 absolute 元素的参照系。
