When incorporating relative positioning in CSS, I have observed significant variations in behavior based on the presence of the HTML5 doctype header <!DOCTYPE HTML>. A simple example to illustrate this point is as follows:
<html>
<body>
<img src="test.png" />
<span style="position: relative; top: -10;">TEST</span>
</body>
</html>
This code will display the word TEST positioned 10 pixels higher than its default location.
However, once the <!DOCTYPE HTML> declaration is included at the beginning of the document without any other modifications:
<!DOCTYPE HTML>
<html>
<body>
<img src="test.png" />
<span style="position: relative; top: -10;">TEST</span>
</body>
</html>
The relative positioning no longer affects the placement of the word TEST. This inconsistency has been observed across multiple browsers like IE, Chrome, and Firefox on Windows. Furthermore, similar quirky behaviors arise when utilizing absolute positioning with or without the HTML5 doctype header. The question that arises is whether there has been a fundamental shift in how relative and absolute positioning are executed in HTML5.