是否可以模拟带有“位置:相对”的元素的“位置:绝对”放置

Is it possible to simulate `position: absolute` placement for element with `position: relative`?

本文关键字：位置 元素 绝对 放置 相对 是否 模拟      更新时间：2023-09-26

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

到目前为止，我们有这样的结构：

<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代码，使用left和top样式指令将#a，#b和#c元素放在#container中。

这样，元素甚至可以"反转"，也就是说：#b可以是左边的第一个元素，#a最后一个元素，这取决于其他规则。

但是，此操作失败，因为它们已从流中取出，因此#container具有空高度。很公平。

以这种方式解决这个问题似乎是不可能的，所以我想对子元素使用 position: relative，但这样做，left 和 top 样式指令现在引用初始元素的位置并且不再可用......

您是否曾经遇到过类似的情况？我能做些什么来实现所需的行为？

谢谢。

PS：对于那些想知道为什么我们不使用<table>元素来表示表格的人，让我们说我也想知道，但对该决定没有权力......

我想到了两件事 - 既笨拙又可能不是超级可扩展的：

1）不是在CSS中添加position: absolute而是在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});
相关文章：