位置绝对框导致容器折叠 [英] Position absolute box causes container to collapse

问题描述

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

我可以通过容器周围的边框看到它已折叠，但我不确定我缺少什么，因此它环绕显示的内部 div.

.container {边框:1px纯黑色；位置:相对；高度:100%；}.盒子 {文本对齐:居中；填充:1em；位置:绝对；宽度:100%；}.box1 {背景颜色:#CECECE；顶部:100%；}.box2 {背景色:#87CEEB；顶部:0%；}

<div class="box box1">内容一
<div class="box box2">内容二

解决方案

如果保存绝对元素的父容器没有明确的高度或宽度，它将崩溃.那么，解决方案是给父容器一个明确的高度/宽度.这是正常行为.

I have 2 divs with position:absolute inside a container with position:relative. I am trying to display the first div .box1 while hiding the second div, .box2, using absolute positioning.

I can see with the border around the container that it is collapsed but I am not sure what I'm missing so that it wraps around the inner div that is displayed.

.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>

解决方案

If the parent container that holds the absolute elements doesn't have an explicit height or width, it will collapse. The solution, then, is to give the parent container an explicit height/width. It's normal behavior.

这篇关于位置绝对框导致容器折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！