title: IE7 z-index stacking bug - how do you stack 2 absolute positioned elements correctly?
body: <p>I'm running into the IE7 z-index stacking bug, but I can't find a way to work around it. Here's a simple HTML test case:</p>
  
  <pre><code>&lt;!doctype html /&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="position:relative; width:500px;"&gt;
      &lt;div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;"&gt;
          &lt;p style="margin:0;"&gt;Menu&lt;/p&gt;
          &lt;ul style="position:absolute; z-index:100; list-style:none; margin:0; padding:0; background-color:#fff; border:1px solid #0000ff;"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div style="position:absolute; z-index:1; top:40px; width:500px; height:75px; background-color:#ccc;"&gt;
          &lt;p&gt;Header&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In this example, you'll see that there are two absolutely positioned elements in the top level div. The first one is a menu, and the second one is a header. The menu items are not stacked correctly and show up behind the header.</p>
  
  <p><img src="https://i.stack.imgur.com/2DVkD.jpg" alt="Screenshot"></p>
  
  <p>I've read a lot of posts about the IE7 z-index bug, but I haven't found anything that helps me with this specific problem. Thanks!</p>