title: keep appended relative elements in body
body: <p>I'm trying to append divs in random positions with the page's width and height, it works but the divs are placed really far down the page or to the left. I've used screen.width, screen.availWidth and document.body.clientWidth and I can't figure it out. I think its partially because of the div's positioning. </p>
  
  <p>Heres my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   var i = 1;
   function createDiv() {
    setTimeout(function() {
     var $newDiv = $('&lt;div&gt;&lt;/div&gt;').css({
      "position": "relative",
      "width": "100px",
      "height": "100px",
      "background-color": "#ccbfd9",
      "border-radius": "720px"
     });
     $($newDiv).each(function() {
      // document.body.clientHeight
      var leftRandPos = Math.floor((Math.random() *  window.innerWidth));
    var topRandPos = Math.floor((Math.random() *  window.innerHeight));
      $(this).css('left', leftRandPos);
      $(this).css('top', topRandPos);
      $('body').append($newDiv);
     });
     i++;
     if (i &lt; 100) {
      createDiv();
     }
    }, 250);
   }
   createDiv();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any suggestions?</p>