Question

以下是html代码，

<div class="simple">
    <nav class="fancy">
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </nav>
</div>

以下是css代码，

div, nav{
    border: 1px solid red;
}
.simple{
    max-width: 400px;
    position: relative;

}

.fancy{
    width: 100px;
    position: absolute;
}

为什么nav元素的绝对定位会使div元素的高度为零？

Answer 1

绝对定位的元素将从正常流量中取出。在计算父母的（自动）高度时，只计算正常流量中的元素。当您删除花哨时，简单中的正常流程中不再有任何元素，因此其计算高度变为0。

Answer 2

因为.simple在内部“无”时崩溃。基本上，如果<div>中没有任何内容，则高度变为零。要覆盖它，您应该使用min-height参数，例如

.simple{
    max-width: 400px;
    position: relative;
    min-height: 100px;
}

100px就是一个例子。您也可以使用％。这里工作小提琴：http://jsfiddle.net/arcsn/c6my0yva/

查询元素的绝对定位

2 个答案: