Css 为什么此表格单元格与相邻的表格单元格重叠？

这是一个SSCCE，演示了一个带有display:table的div，其中三个子div有一个display:table单元格。问题是.blog post幻灯片与.previous幻灯片箭头重叠，而不是相邻

问题是为什么，我应该如何解决这个问题

。张贴主区域{
显示：表格；
宽度：100%；
}
.主区域后。上一个滑动箭头，
.张贴主区域。下一个滑动箭头{
边框：5px纯绿色；
/*检查*/
宽度：5%；
显示：表格单元格；
位置：相对位置；
垂直对齐：中间对齐；
左：20px；
}
.张贴主区域。下一个滑动箭头{
左：自动；
右：20px；
}
.后幻灯片{
边界：5px实心小麦；
/*检查*/
宽度：90%；
位置：相对位置；
}

.

因为您将第一个单元格向右移动了20px：

位置：相对；
左：20px；

然后，如中所述，它与下面的单元格重叠

一旦箱子按照正常流量布置或漂浮， 它可能会相对于此位置移动。这被称为相对的 定位以这种方式偏移长方体（B1）对 框（B2）如下：B2被赋予一个位置，就好像B1没有偏移一样 应用B1的偏移后，B2不会重新定位。这意味着 这种相对定位可能会导致箱子重叠

相反，我会在表格中添加一些空白：

宽度：计算（100%-40px）；
利润率：0.20px；

。张贴主区域{
显示：表格；
宽度：计算（100%-40px）；
利润率：0.20px；
}
.主区域后。上一个滑动箭头，
.张贴主区域。下一个滑动箭头{
边框：5px纯绿色；
宽度：5%；
显示：表格单元格；
垂直对齐：中间对齐；
}
.后幻灯片{
边界：5px实心小麦；
}

.

我不会手动移动按钮和东西，尝试添加display:table cell；post slide{}并去掉所有左：和右：这样的属性

.post-main-area {
  display: table;
  width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
  border: 5px solid green;
  /*check*/
  width: 5%;
  display: table-cell;
  position: relative;
  vertical-align: middle;
}
.post-slide {
  border: 5px solid wheat;
  display: table-cell;
  /*check*/
  width: 90%;
  position: relative;
}

这允许计算机像表格一样定位所有内容，并且由于html文档中元素的宽度和写入顺序，它应该可以工作