title: Javascript: Setting Z-Index on Multiple Elements (ID & Class)
body: <p>I have a javascript function that is supposed to hide and show layered divs by simply changing the z-index. I don't know if this is the best way to do it, but it works except for one issue. I have the content divs (absolutely positioned in CSS on top of each other), but I also have a navigation div (absolutely positioned in CSS at the bottom of the page) that should always remain on top. So I have this javascript code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  var z = 1;
  function showHide(id) {
  document.getElementById(id).style.zIndex = z++;
  document.getElementsByTagName('nav').style.zIndex = z++;
  }
  &lt;/script&gt; 
  </code></pre>
  
  <p>And I have this html:</p>
  
  <pre><code>&lt;div id="1a" class="content" style="z-index:1;"&gt;Content&lt;/div&gt;
  &lt;div id="1b" class="content"&gt;More Content&lt;/div&gt;
  &lt;div id="1c" class="content"&gt;Even More Content&lt;/div&gt;
  &lt;div class="nav" style="z-index:2;"&gt;
    &lt;a href="#" onclick="showHide('1a')"&gt;1&lt;/a&gt; 
  | &lt;a href="#" onclick="showHide('1b')"&gt;2&lt;/a&gt; 
  | &lt;a href="#" onclick="showHide('1c')"&gt;3&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the z-index line for the navigation div messes it up. Not only does it not execute, but anything I put after it doesn't get executed as well (even a basic alert). If I change navigation from a class to an id, it works fine, but I'm going to have multiple navigation divs on each page (multiple slides in a SlideDeck). I could just set the navigation div's z-index to 99999, but I wanted to see why it wasn't working in the "cleaner" way, since it looks like I might be making a basic mistake.</p>
  
  <p>Thank you.</p>