Question

我在position:absolute的容器中有2个带position:relative的div。我试图使用绝对定位隐藏第二个div .box1，同时显示第一个div .box2。

我可以看到容器周围的边框已折叠，但我不确定我错过了什么，以便它包裹显示的内部div。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

如果使用绝对定位，则需要指定尺寸（宽度和高度）。正如你提到的那样，“包装”不会出现绝对定位的项目。

请参阅此答案以获取更多信息：absolute vs relative position width & height

位置绝对框导致容器崩溃

2 个答案: