我在一个容器内有 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>
最佳答案
如果包含绝对元素的父容器没有明确的高度或宽度,它将折叠。那么,解决方案是为父容器提供明确的高度/宽度。这是正常行为。
关于html - position absolute box导致容器塌陷,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30896265/