并排排列的相对定位div出现顶部偏移问题如何解决

你遇到的顶部偏移是display: inline-block元素的默认特性导致的。
inline-block元素默认的垂直对齐规则是vertical-align: baseline（基线对齐），会把元素内部第一行文本的基线和同行其他元素的文本基线对齐。你的两个面板内部内容高度、第一行文本位置有差异，就会自动错位，手动写margin-top: 0也没法覆盖这个默认对齐行为。

直接给.panel样式新增一行垂直对齐规则，强制面板顶部对齐即可：

.panel {
    /* 你原有的panel样式全部保留，只加下面这一行 */
    vertical-align: top;
}

加完之后两个相邻面板就会完全顶对齐，不会再有顶部偏移。

如果后续要加第三个面板，更推荐直接给父容器（即body）用flex布局，从根源避免inline-block的对齐问题、元素间隙问题：

body {
    /* 原有body样式全部保留，新增下面这行 */
    display: flex;
}

flex布局下，子面板默认会自动占满父容器高度、沿水平方向排列、顶部对齐，不需要额外处理对齐规则，后续加更多面板也不会出现错位。

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