title: Is it possible to z-index a nested DIV higher (display 'above') then a root DIV in IE7?
body: <p><strong>UPDATE!!!</strong></p>
  
  <p><strong><em>Suggested answer is NOT correct, my mistake. The #container DIV should've had "float:left;". Please verify the HTML in Firefox and IE7. You can see the difference!</em></strong></p>
  
  <p>I can't get a nested DIV to display above a hierarchically higher nested DIV by using z-index... The overlay keeps laying over the lower nested DIV even though the lower nested DIV has a higher z-index... Is this even possible in IE7?</p>
  
  <p><strong>The following displays the blue #details above the green #overlay in Firefox, however in IE7 the blue #details is below the green #overlay</strong></p>
  
  <p><strong>UPDATE2:</strong>
  Pricey: Adding "z-index:99;" to the #container style makes the class .item divs appear (in Firefox, IE is messed up: anyway both don't display correctly), while they should be under the overlay! Without the #container z-index set, it displays correctly in Firefox, but not IE....</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;style type="text/css"&gt;
              .item {
                  float:left;width:75px;height:75px;background-color:red;
              }
          &lt;/style&gt;
          &lt;div id="main" style="position:relative;"&gt;
              &lt;!-- this one should overlay everything, except #details --&gt;
              &lt;div id="overlay" style="position:absolute;
                                       top:0px;
                                       left:0px;
                                       width:500px;
                                       height:500px;
                                       z-index:1;
                                       background-color:green;"&gt;&lt;/div&gt;
              &lt;div id="container" style="position:relative;float:left;"&gt;
                  &lt;!-- these ones should display UNDER the overlay: so NOT visible --&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;!-- this one should display above the overlay --&gt;
                  &lt;div id="details" style="position:absolute;
                                           width:200px;
                                           height:200px;
                                           background-color:blue;
                                           left:400px;
                                           z-index:99;"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>