Javascript CSS定位，需要一些建议吗

这是我的HTML代码

<div id="container">
        <div id="topleft"></div>
        <div id="topright"></div>
        <div id="bottomleft"></div>
        <div id="bottomright"></div>
    </div>

这是输出

我需要得到的是，所有的4个黑色正方形都像这张图一样被放置在红色正方形的角落里，我应该改变什么或者添加什么代码？谢谢

使#集装箱位置

相对

。和div在

绝对值
中

完整代码

#container{
    width: 400px;
    height: 400px;
    background-color: red;
    margin: 0 auto;
    position: relative; //change

}

#topright{    
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute; //change
    top:0px;
    right:0px;
}
#topleft{
    width: 50px;
    height: 50px;
    background-color: black;
    position:absolute; //change
    top:0px;
    left:0px;  //change
}

#bottomright{
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
    bottom:0px; //change
    right:0px;
}
#bottomleft{
    width: 50px;
    height: 50px;
    background-color: black;
    position:absolute; //change
    bottom:0px; //change
    left:0px; //change
}


css失败原因：对于底部对齐，请使用
bottom:0；左：0
而不是
顶部
和
右侧
…这是正确的语义，否则将不符合
位置
的概念…另外，使子
绝对
和父
相对
！！：）


将
position:relative
添加到
#container
中，将
position:absolute
添加到内部div中

可以将公共属性与逗号组合，如

#bottomright,#bottomleft{css properties}

CSS:

以下css将起作用

#container {
    background-color: #FF0000;
    height: 400px;
    margin: 0 auto;
    position: relative;
    width: 400px;
}
#topleft {
    background-color: #000000;
    height: 50px;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
} 

#topright {
    background-color: #000000;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}
#bottomleft {
    background-color: #000000;
    height: 50px;
    left: 350px;
    position: absolute;
    top: 350px;
    width: 50px;
}
#bottomright {
    background-color: #000000;
    height: 50px;
    left: 0;
    position: absolute;
    top: 350px;
    width: 50px;
}

这种解释是错误的。父母可以是相对的或绝对的，孩子可以是相对的或绝对的。它们可以是您设置的任何内容。@sandeep和NoobEditor谢谢：）您也可以这样写“#container>div{}”。例如@sandeep yes。这是一个ways@sandeep这将节省很多选择器垃圾，- Hiral，你应该考虑和编辑，因为你的投票是最有可能的，用户很可能会引用你的答案，重构你的代码总是一件好事：但是，如果OP有更多的代码< div > /代码>元素，很可能会有更多的机会，这会造成混乱。因此，在这种情况下，
解决方案可能不太好。…。@Mr.Alien感谢您的建议。我已经编辑了答案。
#container{
    width: 400px;
    height: 400px;
    background-color: red;
    margin: 0 auto;
    position: relative;

}

#topright{    
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
    top:0px;
    right:0px;
}
#topleft{
    width: 50px;
    height: 50px;
    background-color: black;
    position:absolute;
    top:0px;
    left:0;
}

#bottomright{
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
    bottom:0px;
    right:0px;
}
#bottomleft{
    width: 50px;
    height: 50px;
    background-color: black;
    position:absolute;
    bottom:0;
    left:0;
}

#bottomright,#bottomleft{css properties}

#container {
    position: relative;
}
#container > div {
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
}
#bottomright, #bottomleft {
    bottom:0;
}
#topright, #topleft {
    top:0;
}
#bottomleft, #topleft {
    left:0;
}
#bottomright, #topright {
    right:0;
}

#container {
    background-color: #FF0000;
    height: 400px;
    margin: 0 auto;
    position: relative;
    width: 400px;
}
#topleft {
    background-color: #000000;
    height: 50px;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
} 

#topright {
    background-color: #000000;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}
#bottomleft {
    background-color: #000000;
    height: 50px;
    left: 350px;
    position: absolute;
    top: 350px;
    width: 50px;
}
#bottomright {
    background-color: #000000;
    height: 50px;
    left: 0;
    position: absolute;
    top: 350px;
    width: 50px;
}