title: Adding child elements (divs) to a parent element (div), how can I stop each child affecting the top value of the child after it?
body: <p>In <a href="http://jsfiddle.net/heQFB/" rel="nofollow">this jQuery code</a>, I am dynamically adding boxes to the canvas div like this:</p>
  
  <pre><code>var canvas = $('#canvas');
  canvas.append('&lt;div id="1"&gt;&lt;/div&gt;');
  ('#1').addClass('ui-boxer')
                  .css({ border: '1px solid white',
                         background: 'orange',
                         padding: '0.5em',
                         position: 'relative',
                         'z-index': 100,
                         left: '1%', top: '10%',
                         width: '40%', height: '50%'});
  
  canvas.append('&lt;div id="2"&gt;&lt;/div&gt;');
  $('#2').addClass('ui-boxer')
                  .css({ border: '1px solid white',
                         background: 'orange',
                         padding: '0.5em',
                         position: 'relative',
                         'z-index': 100,
                         left: '50%', top: '10%',
                         width: '20%', height: '50%'});
  </code></pre>
  
  <p>The boxes are created okay, but the top position of the second box is wrong. It's 10% (like the first box), but it's clearly not working correctly. I think the presence of the first child is affecting it? How can I set the top value so that it is based of the parent element (the canvas div) and not the child element before it? Thanks for reading.</p>