CSS relative定位元素未按预期依次右移的原因咨询

原因分析 #

这是因为相对定位的元素偏移后，会保留自身原本的文档流位置，后续元素依然会按照这个原始位置排列。

具体逻辑：

• <p>是块级元素，默认垂直排列，每个<p>的初始位置都是上一个<p>的下方，并非在同一水平线上；
• .p_relative1偏移后，它的原始文档流位置仍被保留，.p_relative2的初始位置紧挨着这个原始位置，设置left:200px后，视觉上和预期的“向右偏移100px”一致；
• 到.p_relative3时，它的初始位置是紧挨着.p_relative2的原始位置（而非偏移后的位置），此时设置left:300px是基于这个垂直下方的初始位置偏移，自然会和前两个元素的偏移幅度看起来不一致——你混淆了“元素自身初始位置”和“前一个元素偏移后的位置”。

如果要实现所有元素相对于同一基准点依次向右偏移100px，有两种常见方案：

• 将<p>改为行内块元素（添加display: inline-block），让它们初始在同一水平线上，再设置相对定位偏移；
• 使用绝对定位，让所有元素基于同一个父容器定位，此时left值会相对于父容器计算。

内容的提问来源于stack exchange，提问作者samre ray