位置绝对框导致容器崩溃

Question

我有2个div,position:absolute里面有一个容器position:relative.我试图.box1在隐藏第二个div时显示第一个div .box2,使用绝对定位.

我可以看到容器周围的边框是否已折叠,但我不确定我缺少什么,以便它包裹显示的内部div.

.container {
    border: 1px solid black;
    position: relative;
    height: 100%;
}

.box {
    text-align: center;
    padding: 1em;
    position: absolute;
    width: 100%;
}

.box1 {
    background-color: #CECECE;
    top: 100%;    
}
.box2 {
    background-color: #87CEEB;
    top: 0%;
}

<div class="container">
    <div class="box box1">
        Content 1
    </div>
    <div class="box box2">
        Content 2
    </div>
</div>

Answer 1

如果包含绝对元素的父容器没有明确的高度或宽度,它将崩溃.然后,解决方案是为父容器提供明确的高度/宽度.这是正常的行为.