Question

我偶然发现了令人困惑的事情：

＆＃13;

.parent {
    position:relative;
    background:lime;
    height: 100px;
}
.parent div {
    position:absolute;
    background-color: yellow;
}

＆＃13;

<div class="parent">
    Parent
    <div id="test">Child</div>
</div>

＆＃13;

请注意黄色＆＃34; Child＆＃34;矩形在单词＆＃34; Parent＆＃34;下面。为什么？我理解top和left的默认值的方式是0，因此元素应将其自身定位在父级的左上角。实际上，如果我删除文本Parent或将top: 0添加到子元素，则会发生这种情况。但是为什么在这种情况下，绝对定位的盒子会遵循流程？

Answer 1

当位置为auto（这是默认值）时，绝对位置仍然锚定在其父元素内容的流中。如果将子元素移动到父元素的开头，则会看到您的预期（请参阅下面的代码段）。您可以通过添加top: 0;和left: 0;

来避免这种情况

＆＃13;

.parent {
    position:relative;
    background:lime;
    height: 100px;
}
.parent div {
    position:absolute;
    background-color: yellow;
}

＆＃13;

<div class="parent">
    <div id="test">Child</div>
    Parent
</div>

＆＃13;

Answer 2

啊，终于找到了我要找的答案！感谢@Cbroe指出我正确的方向：

https://drafts.csswg.org/css21/visudet.html#abs-non-replaced-height

如果全部三个＆＃39; top＆＃39;，＆＃39; height＆＃39;和＆＃39; bottom＆＃39;是自动，设置＆＃39;顶部＆＃39;到静态位置并在下面应用规则3。

为什么这个绝对定位的元素遵循流程？

2 个答案: