javascript - 是否可以用 `position: absolute` 模拟元素的 `position: relative` 放置？

Question

我必须开发一个生成表格(有点……)的软件，并且必须提供对元素位置的完全控制。

到目前为止，我们有这样的构造:

<div id="container" style="display: table-row">
  <div id="a" style="position: absolute"></div>
  <div id="b" style="position: absolute"></div>
  <div id="c" style="position: absolute"></div>
</div>

还有一些javascript代码来放置#a , #b和 #c #container 中的元素使用 left和 top样式指令。

这样，元素甚至可以“倒置”，即:#b可能是左边的第一个元素和 #a最后一个，取决于其他一些规则。

然而，这失败了，因为那些被从流中取出，所以 #container有一个空高度。很公平。

好像impossible to solve this problem那样，所以我想到了使用 position: relative对于子元素，但是这样做，left和 top样式指令现在引用初始元素的位置并且不再可用...

你遇到过类似的情况吗？我可以做些什么来实现所需的行为？

非常感谢。

P.S:对于那些想知道为什么我们不使用 <table> 的人表示表格的元素，我也想知道，但无权决定...

Answer 1

我想到了两件事 - 既有问题又可能不是 super 可扩展的:

1) 添加 position: absolute 不是在 CSS 中，而是在 JS 中——但在你这样做之前，将容器固定到它的绝对前偏移尺寸，这样高度就不会丢失

var container = $('#container');
container.height(container.height()).children().css('position', 'absolute');

2) 使用position: relative，但设置它们的新位置相对于它们的原始位置减去它们的偏移量。

var el = $('#some_el');
el.css({top: 0 - el.position().top});