绝对定位的盒子导致容器折叠。

Question

我有一个容器，里面有两个带有position:absolute属性的div。我想要显示第一个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>

- Mdd

Answer 1

如果包含绝对定位元素的父容器没有明确的高度或宽度，它将会折叠。解决方法是给父容器一个明确的高度/宽度。这是正常行为。

- Josh Beam

Answer 2

如果您使用绝对定位，那么您需要指定尺寸（宽度和高度）。如果使用绝对定位，则不会发生所谓的“包装”。

有关更多信息，请参见此答案：absolute vs relative position width & height

- Tisch

Answer 3

我无法让这两个“答案”都起作用。今天最好的方法是使用flexbox-container类，根本不要使用绝对定位。

- user21996978

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community