javascript - 'position:absolute' 是否一直为 'display:block'

Question

我想了解 html 中元素的定位。接受的答案 here说，

"All elements that are position:absolute; are automatically treated as display:block, since that's the only logical display mode for absolute positioning."

这总是正确的吗？如果 display 总是阻塞绝对元素，为什么下面的代码片段显示不同？请帮助我理解这一点。谢谢。

 <div>
    <div style="display:inline-block;">aaa</div>    
    <div style="position:absolute;">bbb</div>
    <div style="display:inline-block;">ccc</div>     
    </div>
    
    <br><br>
    <div>
    <div style="display:inline-block;">aaa</div>    
    <div style="position:absolute;display:inline-block;">bbb</div>
    <div style="display:inline-block;">ccc</div>    
    </div>

Answer 1

这里有几件事。首先，不，并非所有绝对定位元素都被视为 display:block。它们的显示值是blockified，这意味着它们被转换为 block 级显示值。例如:

display:inline-flex => display:flex
display:inline-grid => display:grid
display:inline-table => display:table
display:inline list-item => display:list-item (Firefox supports inline list-item)

display:none and display:contents aren't changed.

display:inline, display:inline-block, and internal table object boxes => 
display:block

Elements that are already block level are unaffected. Flex is still flex, grid is 
still grid, etc.

---

但是，这并不能解释为什么您在两种情况下会得到不同的结果，因为在每种情况下绝对定位的元素确实具有 block 的计算显示值。为此，我们需要解决我们对元素显示: block 意味着什么的期望。我们希望它开始一个新行，并使其从左到右的边距边缘填充包含 block 的宽度。

事实上，这只适用于 block level elements in normal flow .绝对定位元素不在正常流中，因此这些规则不适用。他们有自己的一套规则，其中一部分说如果他们的 top, left, bottom, right 值是 auto (他们在你的例子中)，盒子根据它的位置定位如果它没有被绝对定位，本来可以。如果它没有被绝对定位，那么 display:block 和 display:inline-block 的区别就会产生影响，在你的第一种情况下开始一个新行，在你的第二种情况下保持在同一行。