在绝对定位的同级之后定位同级

Question

table {
  width: 250px;
  margin-top: 12px;
  position: relative;
}

h1 {
  position: absolute;
  left: 12.5%;
}

div {
  position: relative;
  display: inline-block;
}

<div>
  <h1>text</h1>
  <table>table content</table>
</div>

我绝对定位h1，以便可以根据其相对位置的父级div移动它。我之所以制作div display: inline-block;是因为我希望它符合table的宽度，以后可以更改。这样，由于h1符合table，因此我实际上使div符合table。

问题是我无法让table与h1不重叠。

如何在没有诸如删除h1并使用表标题的替代方法的情况下做到这一点（h1在这里并不重要，可能还有其他事情）。