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）您的容器需要位置＆＃39; relative＆＃39;

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

Answer 4

包装div应该有一个位置：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-Tricks Video

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>

CSS：定位不起作用

5 个答案: