title: insert div at top of page without overlaying using javascript
body: <p>I wonder if anyone can help me please ?</p>
  
  <p>Basically I have a snippet of Javascript that I want to be able to give people.  So the following is true :</p>
  
  <p>I can't control wherabouts in the page they decide to put the snippet (for various reasons) - It could be in the middle, the end,  wherever.</p>
  
  <p>All the snippet does is put a small DIV at the top of their page.  At the moment I am doing the following (this is the snippet):</p>
  
  <pre><code>&lt;div id="mydiv" style="display:none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 40px; background-color:red; text-align:center; color:white"&gt;&lt;br&gt;Message Inside Div&lt;/div&gt;
  &lt;script&gt;if (Condition) { document.getElementById("mydiv").style.display = "block"; }&lt;/script&gt;
  </code></pre>
  
  <p>Now, that works a treat and when "Condition" is true,  it shows the div.  However,  using this method it overlays the div with it fixed to the top of the page.  </p>
  
  <p>However,  I also want to do it so that the div is inserted at the top of the page but scrolls with the page as normal and DOESN'T overlay the content at the top (IE: It pushes the content down when it appears).</p>
  
  <p>Any ideas on how I would do that please,  remember :  I don't have any access to their page (I don't even know what else is on the page) and the snippet I give them could go anywhere on the page.</p>