'position:absolute' 是否总是 'display:block'答案

【问题标题】：Whether 'position:absolute' is always 'display:block''position:absolute' 是否总是 'display:block'
【发布时间】：2022-01-19 18:52:10
【问题描述】：

我正在尝试了解 html 中元素的定位。接受的答案here 说，

"所有位置为:absolute;的元素都被自动视为显示：块，因为这是绝对的唯一逻辑显示模式定位。”

这总是正确的吗？如果绝对元素的显示总是阻塞，为什么以下代码 sn-ps 出现不同？请帮助我理解这一点。谢谢。

 <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>

【问题讨论】：

它们看起来不同，因为您的第一个有错字。 absolute: 删除冒号或使用适当的分号
抱歉类型，已编辑。可以看看吗，谢谢

标签： javascript html css

【解决方案1】：

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

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 level elements in normal flow。绝对定位元素不在正常流程中，因此这些规则不适用。他们有自己的一套规则，其中一部分说如果他们的上、左、下、右值是auto（它们在您的示例中），则该框的位置将根据它的位置来定位，如果它没有绝对定位。如果它没有被绝对定位，那么 display:block 和 display:inline-block 的差异会产生影响，在你的第一种情况下开始一个新行，在你的第二种情况下保持在同一行。

【讨论】：

【解决方案2】：

position: absolute 的默认行为是 display:block，但在添加 display:inline-block; 时会覆盖该默认行为。

【讨论】：