Проблемы с позиционированием CSS при создании div с помощью jQuery

Question

Я пытаюсь создать div с другими элементами div внутри: один контейнер div, один div сверху и один div снизу. У меня проблема с позиционированием CSS, и мне нужна помощь. Проблема в том, что нижний блок застрял сверху, а не снизу, и я не могу понять причину этого.

JAVASCRIPT (jQuery):

$('<div/>', {
    id: 'window',
    width: this.width,
    height: this.height,
}).appendTo('#content');

$('<div/>', {
    id: 'windowTop',
    width: this.width,
    height: '30'
}).appendTo('#window');

$('<div/>', {
    id: 'windowBottom',
    width: this.width,
    height: '50',
}).appendTo('#window');

CSS:

#window {
    position: relative;
    background: red;
    margin-left: auto;
    margin-right: auto; 
}

#windowTop {
    position: absolute;
    top: 0; 
    background: yellow;
}

#windowBottom {
    positon: absolute;
    bottom: 0;
    background: green;
}

Answer 1

Ваш #windowBottom является потомком #window, поэтому он будет придерживаться нижней части #window -DIV.Если у #window нет содержимого, на верхней части страницы появится #windowBottom.