title: javascript, css, z-index, div stacking
body: <p>I want to create a sort of light/thick box that only acts on a single DIV within a page.
  When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript"&gt;
      &lt;!--//
          function phantom_back(image)
          {
              document.getElementById('phantom_back').style.zIndex = 100;
              document.getElementById('phantom_back').style.height = '100%';
              document.getElementById('phantom_back').style.width = '100%';
              phantom_top();
          }
  
          function phantom_top(image)
          {
              document.getElementById('phantom_top').style.zIndex = 102;
              document.getElementById('phantom_top').style.height = 600;
              document.getElementById('phantom_top').style.width = 600;
              document.getElementById('phantom_top').style.top = 0;
              document.getElementById('phantom_top').style.left = 0;
          }
      //--&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="#" onclick="phantom_back()"&gt;Change&lt;/a&gt;
  
      &lt;div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord"&gt;
          &lt;div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"&gt;&lt;/div&gt;
  
          &lt;div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top"&gt;asdf&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I was wandering why none of the tutorials I've been able to find offer something like this.</p>