可以在没有绝对位置的情况下将项目定位在 table 中紧随其后的另一个项目之下吗？

Question

如果我有一个 table 结构如下：

<table id="tableid">
    <tbody>
        <tr>
            <td id="id1">Button A</td>
            <td id="id2">Button B</td>
            <td id="id3">Button C</td>
            <td id="id4">Button D</td>
        </tr>
    </tbody>
</table>

是否可以在不切换 html 并且不使用绝对位置（并且不使用 js）的情况下按特定定义的顺序放置项目？

就像我想让它们从上到下显示：id2、id4、id1、id3。

它适用于允许为您的个人资料自定义 css 样式但不允许操纵 html 本身的网站，因此我不能简单地在 html.

使用绝对定位可行，但手动定义位置非常笨拙，因为如果我调整 1 个项目的位置，那么我需要为所有项目手动执行此操作。

如果绝对位置是唯一的方式，那么是否可以将一个项目的绝对位置定义为为另一个项目定义的相同位置+一个数量？因此，例如，我是否可以使用 top: 200px 定义 id2，然后对于 id4，我可以从 id2 中检索该最高值并向其添加 10px 还是需要手动将其设置为 210px？

Answer 1

Flexbox 应该能够实现这一点，因为它们允许 CSS 定义元素的顺序位置。

在 Whosebug 上查看此 post 以获得一些应该能够实现您正在寻找的解决方案：

Switching the order of block elements with CSS

可以在没有绝对位置的情况下将项目定位在 table 中紧随其后的另一个项目之下吗？

Possible to position item below another that comes after it in table without absolute position?

html

css

css-position