使用 position: relative 配合 top、left 等偏移属性，可以实现元素相对于其正常文档流位置（即兄弟元素的相对位置）进行偏移。这种定位方式不会脱离文档流，后续兄弟元素会占据它原来的空间，而元素本身在视觉上发生位移。
position: relative 的偏移行为是怎样的
当设置 position: relative 时，元素仍然保留在正常的文档流中，其占位空间由未偏移前的尺寸决定。通过 top 和 left 属性，可以将其视觉位置相对于原始位置移动。如果 top 为正数，元素向下移动；为负数则向上移动。同理，left 控制水平方向的移动。这种偏移是相对于元素自身在文档流中的初始位置，而不是相对于父容器或任何兄弟元素的具体边界，但由于它在文档流中，其初始位置是由前一个兄弟元素决定的，因此表现为相对于兄弟元素的快捷偏移。
div.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
div.box {
width: 50px;
height: 50px;
background-color: lightblue;
margin: 10px;
}
div.offset-box {
position: relative;
top: 20px;
left: 20px;
background-color: lightgreen;
}预期结果：在 .container 中，.offset-box 会在视觉上向右下方各移动 20 像素，但其在文档流中占据的空间仍然是未偏移时的 50x50 像素加上 10 像素的外边距。其他兄弟元素的位置不会因 .offset-box 的偏移而改变。
立即学习“前端免费学习笔记（深入）”；
与 position: absolute 相比有何区别
position: absolute 会完全脱离文档流，元素不再占据原始空间，其偏移是相对于最近的已定位祖先元素（即 position 不为 static 的父元素）。而 position: relative 保持在文档流中，偏移仅影响视觉位置，不影响布局流。这意味着 relative 更适合需要微调元素位置但不希望影响其他元素布局的场景。
div.parent {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
div.relative-box {
position: relative;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: lightblue;
}
div.absolute-box {
position: absolute;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: lightgreen;
}预期结果：.relative-box 在视觉上偏移，但占据原始空间，.absolute-box 脱离文档流，不占据空间，且其偏移是相对于 .parent 的左上角。如果 .parent 没有设置 position，则 .absolute-box 会相对于初始包含块（通常是 html）定位。
偏移量为负值时会发生什么
当 top 或 left 设置为负值时，元素会向相反方向移动。例如，top: -20px 会使元素向上移动 20 像素，left: -20px 会使元素向左移动 20 像素。由于元素仍保留在文档流中，其原始占位空间不变，这可能导致元素覆盖其他内容或超出容器边界，具体取决于上下文。
