CSS的定位问题

Question

我有一个打开几个窗口的应用程序。内容由DOM使用jQuery动态创建，但类是静态的。

问题是底部div粘在顶部div的底部而不是底部（见下图）。

这里有什么东西显然我不见了吗？

.containerDiv {
    position: absolute;
    left:50px;
    top: 60px;
    margin-left: auto;
    margin-right: auto;
    resize: both;
    overflow: auto;
}

.topDiv {
    position: relative;
    top: 0;
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.middlediv {
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
}

.bottomDiv {
    position: relative;
    bottom: 0;
}

它的外观如下：

--------------------
      topDiv
--------------------
     bottomDiv
--------------------


     middleDiv


--------------------

Answer 1

在position:relative div的CSS中将position:absolute更改为bottom。这是bottom:0可以工作的唯一方式。

Answer 2

我认为你可能有绝对和相对的概念错误的方式。

位置：相对;底部：0;表示默认值没有变化。将此元素的底部相对于无论如何位置设置距离0，即根本没有差异。