在CSS中怎样实现相对于兄弟元素而非父元素的快捷偏移定位？-css教程-PHP中文网

使用 position: relative 配合 top、left 等偏移属性，可以实现元素相对于其正常文档流位置（即兄弟元素的相对位置）进行偏移。这种定位方式不会脱离文档流，后续兄弟元素会占据它原来的空间，而元素本身在视觉上发生位移。

在CSS中怎样实现相对于兄弟元素而非父元素的快捷偏移定位？

`position: relative` 的偏移行为是怎样的

当设置 position: relative 时，元素仍然保留在正常的文档流中，其占位空间由未偏移前的尺寸决定。通过 top 和 left 属性，可以将其视觉位置相对于原始位置移动。如果 top 为正数，元素向下移动；为负数则向上移动。同理，left 控制水平方向的移动。这种偏移是相对于元素自身在文档流中的初始位置，而不是相对于父容器或任何兄弟元素的具体边界，但由于它在文档流中，其初始位置是由前一个兄弟元素决定的，因此表现为相对于兄弟元素的快捷偏移。

在CSS中怎样实现相对于兄弟元素而非父元素的快捷偏移定位？

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 更适合需要微调元素位置但不希望影响其他元素布局的场景。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

在CSS中怎样实现相对于兄弟元素而非父元素的快捷偏移定位？

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）定位。