相对定位是在元素原始位置基础上微调，需同时声明position: relative和top/left等偏移属性；它保留原始占位空间，不触发文档流重排，常用于子元素绝对定位参照或像素级调整。

相对定位不是“把元素挪到某处”，而是“在它原本该在的位置上，再微调一下”。用错就容易导致布局错乱、元素重叠却看不见原因。

position: relative 必须显式声明

元素默认是 position: static，这时候 top/left 等偏移属性完全无效。不写 position: relative，光设 top: 20px 就是白搭。

• 必须成对出现：position: relative + 至少一个偏移属性（top、right、bottom 或 left）
• position: relative 本身不触发偏移，只是“开通权限”
• 即使只写 position: relative 不设偏移，元素也会获得 z-index 控制能力（这点常被忽略）

top/left 的数值是相对于原始位置算的

top: 20px 不是“离页面顶部 20px”，而是“比它本来该在的地方往下移 20px”；left: -40px 是往左拉出 40px，可能部分遮挡前一个兄弟元素。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 正数向下/右，负数向上/左 —— 和直觉相反的点在于：负 top 是往上推，不是“抬高”
• 原始占位空间依然保留，后续元素不会填补空缺，这点和 absolute 有本质区别
• 如果父容器有 overflow: hidden，且偏移后内容超出，会被裁剪（但占位还在）

relative 常见误用场景

很多人拿 relative 当“万能定位”，结果引发意料外的布局干扰。

• 给导航栏加 position: relative; top: -10px 想让它贴顶？很可能导致下面的内容没上移，反而留出空白
• 想让图标浮在文字右上角，直接对图标设 relative + top: -8px; right: 4px？它仍占据原位置，可能撑开行高
• 用 relative 模拟 absolute 效果（比如弹窗），却不加 z-index，结果被其他元素盖住

真正需要相对定位的时候，往往只涉及像素级微调或为子元素的 absolute 定位提供参照——这两类意图必须分清。偏移量一旦超过 20px，就该重新考虑是否该换方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！