css - 为什么绝对定位的 div 得到 display:block 而不是指定的表格单元格？

Question

我确定这与position:absolute覆盖display要阻止的 css 属性有关。

正如您在下图（和这个小提琴）中看到的那样，左侧（绝对）的 div 不会垂直居中它的文本，但右侧的 div 会（它是相对的）。如果在 chrome 调试器中看到，前者有display:block，后者有display:table-cell.

在此处输入图像描述

问题：我知道定位某些东西绝对是“将其从文档流中删除”，但这是否意味着它不会覆盖显示，并且所有内容都将默认为其默认显示（即 div 的块，span 的内联等）为什么？这种行为有特定的原因吗？

score 4 · Accepted Answer

这是规范要求的：

如果'position'的值为'absolute'或'fixed'，则框是绝对定位的，'float'的计算值为'none'，按下表设置显示

在规范的该部分中显示的表格中，“显示”的任何与表格相关的值都会计算为“块”。

正如您所说，绝对定位某些东西会将其从正常流程中移除；因此，它不再有要显示的表格，因此将其显示为表格单元格不再有意义。为了将元素显示为表格单元格，它需要适当的容器，而且这些容器似乎只能在正常流程中隐式生成。

score 2 · Accepted Answer

任何具有 position:absolute 的元素都将被视为 display:block。它不会被默认处理。

'从文档流中删除它'

意味着它将被视为它自己的图形实体，而不是与任何其他实体相关。一个元素只能显示为与表格相关的表格单元格。大多数显示模式仅在与其他元素相关时才有意义。主要的例外是“阻止”和“无”

我做了一个非常粗略的小提琴，显示了 div 和 span 元素的各种显示类型的相对与绝对示例。注意 display:none 既适用于相对定位也适用于绝对定位，但 display:inline 只适用于相对定位。

2 回答 2