使用jQuery创建div时的CSS定位问题

Question

我尝试使用其他div创建div：一个容器div，一个div位于顶部，一个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一个孩子，因此将坚持的#window -div底部。如果#window没有内容，则#windowBottom将出现在页面顶部。