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将显示在页面顶部。

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

1 个答案: