title: Javascript Absolute Positioning
body: <p>I am trying to create a new div layer using JavaScript that can be absolutely positioned on the page after page load.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  &lt;script type="text/javascript"&gt; 
  function showLayer() {
  var myLayer = document.createElement('div');
  myLayer.id = 'bookingLayer';
  myLayer.style.position = 'absolute';
  myLayer.style.x = 10;
  myLayer.style.y = 10;
  myLayer.style.width = 300;
  myLayer.style.height = 300;
  myLayer.style.padding = '10px';
  myLayer.style.background = '#00ff00';
  myLayer.style.display = 'block';
  myLayer.style.zIndex = 99;
  myLayer.innerHTML = 'This is the layer created by the JavaScript.';
  document.body.appendChild(myLayer);
  }
  &lt;/script&gt;
  &lt;/head&gt;&lt;body bgcolor=red&gt;This is the normal HTML content.
  &lt;script type="text/javascript"&gt; 
  showLayer();
  &lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>The page can be seen <a href="http://js.yachting.org/test.asp" rel="noreferrer">here</a>.</p>
  
  <p>The problem I am having is that the div is sitting after the original body content rather than over it on a new layer. How can I remedy this?</p>