html - 将兄弟元素放在另一个之上

Question

我有一个包含多行的 TABLE。在每一行中，一个 TD 元素包含多个 DIV 元素:

1. 可以有任何维度，但所有维度(在一个 TD 内)都具有相同的像素维度
2. 必须将一个放在另一个之上
3. 包含TD需要根据子DIV元素调整大小
4. 一次显示一个DIV(静态)
5. 当从一个更改为另一个时，将使用淡入淡出(因此其中两个将同时显示)
6. 绝不会同时显示超过两个

这是此类表格的简化示例

<table>
    <tr>
        <td>Name</td>
        <td>
            <div>First</div>
            <div>Second</div>
            ...
            <div>Last</div>
        </td>
        <td>Additionals</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>
            <div>First</div>
            <div>Second</div>
            ...
            <div>Last</div>
        </td>
        <td>Additionals</td>
    </tr>
    ...
</table>

显而易见的解决方案是设置

div
{
    position: absolute;
}

这将自动将 DIV 元素放置在彼此之上(根据流布局)，但 TD 维度将保持不变，就好像它不包含子元素一样。溢出不做任何事情，因为子元素是绝对定位的。

td
{
    overflow: auto;
}

我应该如何进行这项工作？

Answer 1

您事先知道 div 的大小吗？如果是这样，您可以只给包装器 div 这些尺寸:

<td>
    <div class="wrapper">
       <div>1</div>
       <div>2</div>
       <div>3</div>
    etc...

如果你不知道大小，那么，因为你已经在使用JS，你可以获取包装器的第一个子div的大小，然后通过JS设置包装器尺寸。

更新:

我能想到的使用 CSS 单独完成此操作的唯一方法是让第一个 DIV 渲染两次。第一个实例设置为 position: relative，然后它是重复的，像其他的一样，可以设置为 position: absolute。这个克隆然后就像垫片一样。您可以设置 visibility: hidden 如果您想确保它不会在视觉上显示(但仍占用适当的空间)。然而，这样做的缺点是您现在在页面上复制了内容，从 SEO 和/或可访问性 POV 来看这可能不是理想的选择。

我可能会走 JS 路线并在页面加载后获取尺寸。