title: HTML5 changes to CSS relative and absolute positioning
body: <p>I've noticed that CSS using relative positioning will be handled very differently if my web page contains the HTML5 doctype header <code>&lt;!DOCTYPE HTML&gt;</code>. For example:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;img src="test.png" /&gt;
  &lt;span style="position: relative; top: -10;"&gt;TEST&lt;/span&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>will render the word TEST aligned 10 pixels higher than its default position like so:
  <img src="https://i.stack.imgur.com/GuwpT.png" alt="text aligned with the image top"></p>
  
  <p>But if I add <code>&lt;!DOCTYPE HTML&gt;</code> to the top of the document and make no other changes:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;img src="test.png" /&gt;
  &lt;span style="position: relative; top: -10;"&gt;TEST&lt;/span&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>then the relative positioning appears to have no affect on the word TEST:
  <img src="https://i.stack.imgur.com/feOM3.png" alt="text no longer aligned"></p>
  
  <p>This behavior is consistent in the latest versions of IE, Chrome, and Firefox on Windows. I've noticed other quirky behavior when using absolute positioning with and without the HTML5 doctype header.</p>
  
  <p>Is there a fundamental change on how relative and absolute positioning is applied in HTML5?</p>