Question

到目前为止，我只需要担心在父母中设置一个儿童div，在这种情况下，我被教导要这样做：

parent {
height: 300px;
width: 100%;
position: relative;
}

child {
bottom: 1px
position: absolute
}

这里的孩子应该位于父母的内部，但是在父母的底部。因此，在我看来，将子项定位在父项中的关键是位置：父项中的相对位置和子项中的位置：绝对位置。

现在我正在尝试将子div放在现有子div中，但由于它已经设置为position：absolute，我不知道该怎么做。使用上面的例子，我如何将第二个孩子放在第一个孩子的底部？

Answer 1

如果绝对定位的元素位于父position: relative或position: absolute内，则会根据其父容器的位置进行定位。

<div class="parent">
    <div class="child-1">
        <div class="child-2"></div>
    </div>
</div>

.parent {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #bbb;
}

.child-1 {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 75px;
    height: 75px;
    background-color: #fff;
}

.child-2 {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    background-color: #bbb;
}

工作得很好。这里有一个指向小提琴的链接，您可以在其中播放结果：http://jsfiddle.net/autoboxer/3583nazg/

使用嵌套div控制位置（超过2个）

1 个答案: