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>

Answer 2

使用 bottom：0; 在第二个div 中，然后第一个在顶部，另一个在底部

<div class="parent">
    <div class="div1">
    </div>
    <div class="div2">
    </div>
</div>
<style>
.parent
{
    height:400px;width:400px;border:1px solid #000;
    position:relative;
}
.div1
{
    position:absolute;
    height:100px;
    width:100px;border:1px solid #000;
}
.div2
{
    position:absolute;
    height:100px;
    width:100px;
    border:1px solid #000;
    bottom:0;
}
</style>

Answer 3

1）您的容器需要位置"相对"

2）你的盒子需要位置"绝对"，而不是"相对"

类="ans>

包装div 应该有一个位置：相对，两个内部div 应该有一个位置：绝对。

<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>

CSS技巧视频

Answer 4

您必须在子div 中添加相对于容器div 的位置和绝对值，从而将div 置于底部。 避免两个div重叠 更改最后一个div的底部

<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:100px;">
    </div>
</div>