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>

Answer 2

使用底部：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）您的盒子需要位置“绝对”，而不是“相对”

Answer 4

包装 div 应该有一个 position:relative 并且两个内部 div 应该有 position:absolute。

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

您必须在子 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>