html - position absolute box导致容器塌陷

Question

我在一个容器内有 2 个 position:absolute 的 div，position:relative。我试图使用绝对定位显示第一个 div .box1，同时隐藏第二个 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

如果包含绝对元素的父容器没有明确的高度或宽度，它将折叠。那么，解决方案是为父容器提供明确的高度/宽度。这是正常行为。