为什么绝对定位的div会显示：block而不是指定的table-cell？

Question

我确信这与position:absolute有关，并且会覆盖要阻止的css display属性。

正如你在下面的图片中所看到的（和fiddle）左边的div（绝对）不是垂直居中它的文本，而是右边的那个（它是相对的）。如果在chrome调试器中看到，前者有display:block，后者有display:table-cell。

问题：我知道定位的东西绝对'将其从文档流中删除'，但这意味着它不会覆盖显示，并且所有内容都将默认为默认显示（即阻止divs，forline for span等）为什么？这种行为有特定原因吗？

Answer 1

这是spec：

所要求的

  

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

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

正如你所说，绝对定位的东西会将它从正常流动中移除;因此，它不再有一个要显示的表格，因此将其显示为表格单元格不再有意义。为了将元素显示为表格单元格，它需要适当的容器，看起来这些只能在正常流程中隐式生成。

Answer 2

任何位置为absolute的元素都将被视为display：block。它不会被默认处理。

  

'将其从文档流

中删除

意味着它将被视为自己的图形实体，而不是与任何其他实体相关。元素只能显示为与表相关的表格单元格。大多数显示模式仅对其他元素有意义。主要的例外是'block'和'none'

我做了一个非常粗略的fiddle，它显示了div和span元素的各种显示类型的相对vs绝对样本。请注意，display：none适用于相对和绝对定位，但显示：inline仅适用于relative。