css - Display one DIV directly below dynamically changing DIV

Question

I have one DIV, which changes height depending on data which a user enters into it. Once they are finished, they click a button and a second DIV appears below it with all the data displayed in a table. The second DIV is always on the page, but it's opacity is set to 0.

As the first DIV can be anywhere from 100px to 1000px in height, how can I get the second DIV to always display directly below it? Ive been playing around with margins and paddings but I just can't get the second DIV to appear dynamically in the right spot.

Preferably using CSS if thats an option.

Thanks.

Answer 1

如果 div 是一个块（默认），它将显示在第一个 div 的底部

<div class="firstDiv"></div>
<div class="secondDiv"></div>

如果你想让第二个 div 重叠第一个 div 并通过滚动移动你应该使用 CSS 位置属性

.secondDiv{
    position:fixed;
    right:0;
    bottom:0;
}

Answer 2

您必须确保在您的 div 中将 CSS位置属性设置为相对。就像是：

HTML：

<div class="user_input_data"></div>
<div class="results hidden"></div>

CSS：

div.user_input_data
{
    position: relative;
}
div.results
{
    position: relative;
}
div.hidden
{
    display: none;
}
div.block
{
    display: block;
}

然后你必须删除隐藏类并添加块类来显示你的结果。