html - CSS:定位不起作用

Question

我试图将两个盒子叠放在另一个 div 的底部。我有以下代码:

<div style = "height:400px;width:400px;border:1px solid #000;">
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
</div>

问题是盒子在容器的顶部而不是底部。请帮忙。

Answer 1

你必须让容器是相对的，而盒子是绝对的:

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

编辑明确答案:

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>