我在处理 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 较低。
我现在很沮丧,需要帮助。非常感谢!
最佳答案
试试这个: 确保下拉菜单的 parent 有一个职位:相对。 IE 6 & IE 7 Z-Index Problem 我通常会确保 ul 在这种情况下也会有一个 display:block。
我要做的另一件事是将父级的 z-index 设置为较低的数字,并通过将 z-index 应用到正文来设置页面上的 z-index。
关于jquery - 如何解决 IE7 中复杂的 Z-index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12118762/