title: Z-index not overlaying over divs further down in the DOM
body: <p>I'm attempting to create a tooltip-like system where a mouseenter event causes a div to show up which will overlay content. Unfortunately the issue I've run into is that content <em>later</em> in the DOM is not disappearing in IE7, while content earlier is disappearing correctly behind the z-indexed element.</p>
  
  <p>Here is some sample code which illustrates the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;style&gt;
    .container { margin-top: 200px; }
    .node { float: left; width: 100px; height: 100px; background: #eee; margin-right: 50px; position: relative;}
    .two { position: absolute; left: -200px; top: 20px; width: 500px; height: 500px; background: green; z-index: 200;}
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
  &lt;div class="node"&gt;
    &lt;div class="one"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="node"&gt;
    &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="node"&gt;
    &lt;div class="three"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The gist is rather simple. 3 identical gray boxes. Except in one of those boxes there is the tooltip (the giant green box). If you view this in Firefox, it works fine. If you view it in IE7 you'll notice that the green box overlays the first node, the second node, but the third node shows through. In addition if you set the z-index: 1 property on .node you'll notice that it exhibits the same behavior even in Firefox.</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>Thanks to the response below I was able to get aligned on the right track. First, set the z-index of all tooltips to the highest element. Then set the z-index of all of the node elements to a lower number. I used 10 and 0. Next, on hover, set the z-index of the highest brother element needs to be higher than it's brothers, I used 5. In this case, if I want .child2 to be on top of everything, then I need to set the z-index of the highest parent which is a brother to everything I want to overlay (this could be multiple parents up the chain). In this case, it is node. So the z-index of the node which contains .two needs to be higher than the z-index of the other .node. Likewise, if the tooltip was at node -> subnode -> tooltip and that node was adjacent to similar trees, then I would need to set the node z-index (2 parents up).</p>