0

我在处理 IE7 的 z-index 时遇到问题。我已经进行了大量研究，但仍然无法解决我的问题。

我有

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.

在 Chrome 和 FF 中一切正常，但在 IE 中。下拉菜单将显示在底部按钮的后面，而不是覆盖它们。

顶部按钮是下拉菜单的父级，底部按钮是弹出图像的父级。

我努力了

1.设置顶部和底部按钮的相对位置。

2.运行这个脚本

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

上面的脚本将修复下拉菜单以覆盖底部按钮，但也会使顶部按钮覆盖流行图像，因为流行图像的 z-index 较低。

我现在很沮丧，需要帮助。非常感谢！

4

1 回答 1

0

试试这个：确保下拉列表的父母有一个位置：相对。 IE 6 & IE 7 Z-Index 问题 我通常确保在这种情况下 ul 也会有一个 display:block 。

我要做的另一件事是将父级的 z-index 设置为较小的数字，并通过将 z-index 应用到 body 来设置页面上的 z-index。

于 2012-08-25T03:02:33.180 回答