Question

我听说如果我们有绝对元素 作为相对元素的 子元素， 相对元素将从不显示其中的内容，除非，因为声明了特定高度。

但这种假设一定是错的：

<div class="a">
    <div class="b wrapper-to-contain-floats">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dicta modi natus iure temporibus, asperiores consequuntur at explicabo aperiam aliquid, rem eligendi corporis possimus veritatis maxime, praesentium reiciendis! Debitis, illo!</p>
    </div>
</div>


.a {
 position: relative;   
}

.b{
    position: absolute;
    left: 0;
    top:0;
}

.wrapper-to-contain-floats {
    overflow: hidden;
}

https://jsfiddle.net/buc87c37/

为什么我们会看到段落内容？

我可以帮忙吗？

Answer 1

＆＃34;如果我们将绝对元素作为相对元素的子元素，则相对元素将永远不会显示内部的内容，除非声明了特定的高度。＆＃34;

哈哈，什么？我很想知道那个说这个的人，特别是如果它是大学教授或受人尊敬的网页设计博客。我喜欢感觉优越。

我将尝试为您提供更好的rel / abs有趣行为指南。＆＃34;当元素绝对定位时，它不会影响＆＃34;中包含的div的总内容区域。

通常情况下，div没有高度 - 他们不需要高度。默认情况下，height: auto将其高度扩展为子元素或子子元素中任何内容的高度之和。但position: absolute并未发生这种情况。如果您检查JSFiddle，您会看到.a的实际高度 0 。这种情况并不常见，但事实证明，它实际上并没有阻止内容出现，因为默认的溢出行为是＆＃34; overflow: visible＆＃34;。如果您为.a提供边框，则可以更好地查看效果。

通常，垂直滚动网页的整个扩展性质取决于自动内容高度计算的行为。因此，绝对定位在以下场景中是有意义的：

您想要绝对定位的元素只有一个
您可以预先知道元素的最小高度，并知道其中的绝对定位元素将有空间（随机示例：顶角的关闭按钮）
JavaScript不断重新计算元素的位置/大小，并负责其正确的大小和位置

但是，如果你有一个垂直系列的表单元素，那就应该真正使用普通的文档布局。从您的结账表格的初步检查，我无法真正找到需要绝对定位的布局的任何方面。您应该能够display: none当时不应该处于活动状态的任何步骤，然后它们不会影响当前步骤的布局。

CSS - 相对元素是否需要高度？

1 个答案: