title: Stacking of elements using Javascript
body: <p>I have the following code for stacking of elements and on putting the cursor over an elemnt that element comes to the top.
  Here is the code.. It is not working for some reason. The paragraphs are displayed, but on moving the mouse over them nothing happens.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Stacking&lt;/title&gt;
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .layer1Style
  {
  position: absolute;
  top:50pt;
  left:50pt;
  background-color:red;
  z-index:0;
  }
  .layer2Style
  {
  position: absolute;
  top:75pt;
  left:75pt;
  background-color:green;
  z-index:0;
  }
  .layer3Style
  {
  position: absolute;
  top:100pt;
  left:100pt;
  background-color:blue;
  z-index:10;
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  var top="layer3";
  
  function mover(newTop)
  {
  var oldTopStyle=document.getElementById(top).style;
  var newTopStyle=document.getElementById(newTop).style;
  oldTopStyle.z-index="0";
  newTopStyle.z-index="10";
  top=document.getElementById(top).id;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="layer1Style" id="layer1" onmouseover="mover('layer1')"&gt;
  &lt;p&gt;This is my first paragraph&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="layer2Style" id="layer2" onmouseover="mover('layer2')"&gt;
  &lt;p&gt;This is my second paragraph&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="layer3Style" id="layer3" onmouseover="mover('layer3')"&gt;
  &lt;p&gt;This is my third paragraph&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>