jQueryでdivを作成するときにCSSの配置に問題が発生する

Question

他のdivが内部にあるdivを作成しようとしました.1つのコンテナdiv、1つ上のdivと1つ下のdivです。私は解決するために助けが必要なCSSの配置に問題があります。問題は、ボトムdivがボトムではなくトップにくっついてしまい、その理由を理解できないことです。

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 -divの底に固執する、#windowの子です。 #windowにコンテンツがない場合は、ページ上部に#windowBottomが表示されます。