css - 使用嵌套 div(超过 2 个)控制位置

Question

到目前为止，我只需要担心将子 div 定位在父 div 中，在这种情况下，我被教导这样做:

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

child {
bottom: 1px
position: absolute
}

这里的 child 应该放在里面，但是在 parent 的底部。所以在我看来，将子元素定位在父元素中的关键是父元素中的 position:relative 和子元素中的 position: absolute。

现在我试图在现有的子 div 中放置一个子 div，但由于它已经设置为 position: absolute，我不确定该怎么做。使用上面的例子，我如何将第二个 child 放在第一个 child 的底部？

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

会工作得很好。这是一个 fiddle 的链接，您可以在其中玩弄结果:http://jsfiddle.net/autoboxer/3583nazg/