html - 当另一个不同大小的 div 容器变得可见时如何将 div 容器向下移动

Question

页面上有四个大小不同的 div 容器。说-

div1 - <div id="id1" class="foo">   ---has a table inside it with 10 rows
div2 - <div id="id2" class="foo">   ---has a table inside it with 6 rows
div3 - <div id="id3" class="foo">   ---has a table inside it with 2 rows

div4 - <div id="fui">    --- has a text area and a submit button

默认情况下，在页面加载时，div1、div2、div3hidden在 CSS 下面，div 4 始终可见。现在基于某些条件，div1、div2、div3 变得可见。

我面临的问题是当 div1、2、3 中的任何一个变得可见时，div4 不会相对向下移动而是重叠并出现在可见 div 的顶部（div1、2、3 中的任何一个）。我想将 div4 相对于上面出现的任何 div1 或 div2 或 div3 向下移动。

CSS -

.foo {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 100;
        left: 10;
        display: none;
    }


#fui {
        width: 100%;
        height: 100%%;
        position: relative;
        left: 100;
        top: 400;
    }

要显示 div，我在 java 脚本中使用以下代码 -

style.display = 'inline-block';