title: why does height and top attribute not work when position is relative?
body: <p>This will position the box a little below the top</p>
  
  <pre><code>&lt;div style="height: 10em; width: 50%; left: 25%; top:2em; position: relative; background: white;"&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>This will position the box near the top and it looks like neither the height nor top property is<br>
  working. The height of the box is not 50%, and the box is not 50% below the top. </p>
  
  <pre><code>&lt;div style="height: 50%; width: 50%; left: 25%; top:20%; position: relative; background: white;"&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>I am pretty much a beginner at this stuff, but it would seem if left and width work with a percentage shouldn't top and height?</p>