css - 为什么绝对定位的div会显示:block instead of the specified table-cell?

Question

我确定这与 position:absolute 和重写 css display 属性有关。

正如您在下图中(和这个 fiddle )中看到的那样，左侧的 div(绝对)没有垂直居中它的文本，但右侧的 div 垂直居中(它是相对的)。如果在chrome调试器中看到，前者有display:block，后者有display:table-cell。

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

Answer 1

这是 spec 所要求的:

if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below

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

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