IE7 z-index and stacking contexts -- z-index works everywhere but IE7
===

So I came up with this jsfiddle: http://jsfiddle.net/3sdES/2/ that produces some interesting results.

In any browser other than IE7, the page renders with the "modal" element overlaid on top of everything else:
![Chrome screenshot][1]


However in IE7, the z-indexes don't seem to work as they do elsewhere:
![IE7 screenshot][2]

The way I understand IE7 and z-indexes is that it creates a new stacking index for every element with "position" set. But all the elements I'm dealing with here have position set; it's my understanding that they should be in the same stacking context and thus the backdrop(with z-index 1040) should appear behind the modal(with z-index 1050)... but it's clearly not happening with IE7.

Any thoughts? I've tried shifting things all over the DOM, applying positions and z-indexes everywhere and I can't make IE7 happy.

  [1]: http://i.stack.imgur.com/mdDo6.png
  [2]: http://i.stack.imgur.com/tPIVP.png