为何未修改display属性仍能让div横向排列？技术咨询

嘿，这个问题问得挺有意思！其实你能实现这个效果的核心，是相对定位（position: relative）的特性，咱们结合你的代码一步步拆解清楚：

首先得回忆下：默认状态下div是块级元素，每个都会独占一行，正常情况下三个div会垂直堆叠。但相对定位的元素有个关键特性——它是相对于自己原本在文档流里的位置进行偏移，而且它原本占据的文档流位置会被保留，但元素本身会脱离原位置，和其他元素产生视觉上的重叠或排列效果。

咱们来逐个分析你的三个div：

• .red div：设置了position: relative; left: 200px;，它原本在文档流的最上方最左侧，现在向右偏移200px，跑到了右侧区域。
• .blue div：默认会排在.red原本的位置（最上方最左侧），你给它加了position: relative; bottom: 100px;——相对定位里的bottom值为正，是让元素向上偏移（相对于自身原位置），所以它刚好留在了最左侧的顶部位置，和.red的水平高度对齐。
• .yellow div：默认会排在.blue的下方（也就是第二行最左侧），你设置了position: relative; left: 100px; bottom: 200px;——bottom:200px让它向上跳了200px，直接跳过了.red和.blue原本的垂直占位，再加上left:100px向右偏移，刚好卡在.blue和.red中间的水平位置。

这样一来，三个div就通过相对定位的偏移，在视觉上“挤”到了同一水平线上，看起来像是横向排列，但本质上它们的display属性还是默认的block，只是通过位置偏移实现了视觉效果。

不过要提醒一句：这种方式其实是用偏移模拟横向布局，并不是规范的布局手段——因为它们原本的文档流位置还在，后续添加元素很容易受到这些占位的影响，出现布局混乱。如果要做稳定的横向排列，更推荐用Flexbox、Grid，或者inline-block这类专门的布局方案哦。

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