Question

我注意到，如果我的网页包含HTML5 doctype标题<!DOCTYPE HTML>，那么使用相对定位的CSS将会有很大不同的处理方式。例如：

<html>
<body>

<img src="test.png" />
<span style="position: relative; top: -10;">TEST</span>

</body>
</html>

会将单词TEST与其默认位置对齐10个像素，如下所示： text aligned with the image top

但是，如果我将<!DOCTYPE HTML>添加到文档顶部并且不做任何其他更改：

<!DOCTYPE HTML>
<html>
<body>

<img src="test.png" />
<span style="position: relative; top: -10;">TEST</span>

</body>
</html>

然后相对定位似乎对单词TEST没有影响： text no longer aligned

此行为在Windows的最新版IE，Chrome和Firefox中保持一致。当使用带有和不带HTML5 doctype标头的绝对定位时，我注意到了其他奇怪的行为。

HTML5中如何应用相对和绝对定位会有根本性的变化吗？

Answer 1

这与HTML5无关;这是quirks mode和标准模式之间的差异，两者都存在了很长时间。

Quirks模式可以由多种因素触发，其中一个因素完全没有doctype声明而在您的问题中显示。在怪癖模式下，允许无单位长度（并将其视为像素长度），这就是您的相对定位有效的原因。

在标准模式下，不允许无单位长度（除非它们为零），因此您的top声明变为无效CSS，并被忽略。无论您使用的是HTML5 doctype还是HTML 4或XHTML doctype，都是一样的。实际上，HTML5 doctype没有任何特殊含义或目的 - 它的创建只是为了使浏览器以标准模式呈现。