How to solve a complicated Z-index issue in IE7

Question

I am having a trouble working on the z-index of IE7. I have done tons of research and still can't fix my problem.

I have

4 buttons with drop down menu. The dropdown menu has absolute position and have z-index of 9999;

 ----     ----    -----    -----
|    |   |    |  |     |  |     |
 ----     ----    -----    -----
dmenu    dmenu    dmenu    dmenu

another 4 buttons with popup images that pop on top of the button. The images also have absolute position and have z-index of 9999;

 pop img   pop img  pop img     pop img
 ----       ----    -----      -----
|    |     |    |  |     |    |     |
 ----       ----    -----      -----



 I want dropdown menu will cover the buttons below and and pop images will cover the button above. 

Everything works fine in Chrome and FF but IE. The dropdown menu will show behind the bottom buttons instead of covering them.

The top buttons are the parents of dropdown menu and bottom buttons are the parents of pop images.

I have tried

1.set relative position on top and bottom buttons.

2.run this script

   var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
               console.log($(this));
       });

The above script will fix the dropdown menu to covers the bottom buttons but also make the top buttons cover pop images because pop images have lower z-index.

I am very frustrated now and need helps. Thanks so much!

Answer 1

Try this: Make sure the dropdown's parents have a position:relative. IE 6 & IE 7 Z-Index Problem I usually make sure the ul in this case would have a display:block as well.

The other thing I would do is set the z-index of the parent to a lower number and set the z-index on the page by applying a z-index of 0 to the body.