Проблема позиционирования с CSS

Question

У меня есть приложение, которое открывает несколько окон. Контент динамически создается DOM с помощью jQuery, но классы являются статическими.

Проблема в том, что нижний блок придерживается нижней части верхнего блока вместо нижнего (см. Иллюстрацию ниже).

Есть ли что-то, что я, очевидно, здесь упускаю?

.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 на position:absolute в CSS-коде bottom div. Это единственный способ, которым bottom:0 может работать.

Answer 2

Я думаю, что вы можете иметь понятия абсолютного и относительного неверно.

позиция: относительная; низ: 0; означает отсутствие изменений по умолчанию. Расположите нижнюю часть этого элемента на расстоянии 0 относительно того места, где оно было бы в любом случае, т. Е. Никакой разницы.