IE 6、7和8 Z-index

I have two divs, overlay and results, with z-indexes of 100 and 200 respectively.

The divs css is below:

.overlay {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 100;
}

.results {
  position: absolute;
  z-index: 200;
}

Content is pulled via Ajax, sent to the results div, and then shown with javascript.

The overlay, regardless of what I do, always sits on top of the results window. I've tried altering the css immediately after the results are shown which makes no difference. This only happens IE 6-8 which I'm assuming is because of the peculiar way z-index works for those versions.

Any insight into how I could go about bringing the results box into view?

Elements with a higher z-index will appear in front of elements with a lower z-index in the same stacking context. If two elements have the same z-index, the latter one appears on top. Stacking context is defined by:

• The Document Root
• Elements with position: absolute or position: relative and a z-index
• Elements that are partially transparent, that is they have an opacity < 1
• In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)

If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1 to any element that also has some position or opacity set.