Javascript重叠，设置Jquery的Z顺序答案

【问题标题】：Javascript Overlapping, Set Z order of JqueryJavascript重叠，设置Jquery的Z顺序
【发布时间】：2011-11-21 00:35:33
【问题描述】：

好吧，我卡住了。我正在使用opencart，并且我添加了jquery缩放插件以便可以放大图像。

由于这样做现在与菜单冲突，我不知道该怎么办？

有没有什么方法可以在页面上设置 jquery 的排序顺序。我已经尝试过 JQuery topZIndex 插件，但没有成功。

PS：我也在css中使用z-index。

我试过了：

#menu > ul > li {
position: relative; i also tried absolute
float: left;
z-index: 100;   
}

对于我正在使用的 jqzoom：

$(function() {
var options =
        {
            zoomType: 'innerzoom',
            zoomWidth: 800,
            zoomHeight: 400,
            showEffect:'fadeout',
            hideEffect:'fadeout',
            fadeoutSpeed: 'slow',
            preloadImages: 'true',
            preloadText: 'Loading...'

        }

$(".jqzoom").jqzoom(options);
  });

我的问题是下拉菜单应该越过 jqzoom 图像，但是下拉菜单出现在 jqzoom 图像后面。我想知道是否有办法将 z-index 设置为 jquery 以将其设置到后面或其他什么？

我尝试过使用 topZIndex() jquery 插件并使用了$(".jqzoom").topZIndex( { increment: 0 } ); 和$(".jqzoom").topZIndex( { increment: 100 } );

菜单的javascript是：

$('#menu ul > li > a + div').each(function(index, element) {
    // IE6 & IE7 Fixes
    if ($.browser.msie && ($.browser.version == 7 || $.browser.version == 6)) {
        var category = $(element).find('a');
        var columns = $(element).find('ul').length;

        $(element).css('width', (columns * 143) + 'px');
        $(element).find('ul').css('float', 'left');
    }       

    var menu = $('#menu').offset();
    var dropdown = $(this).parent().offset();

    i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());

    if (i > 0) {
        $(this).css('margin-left', '-' + (i + 5) + 'px');
    }
});

// IE6 & IE7 Fixes
if ($.browser.msie) {
    if ($.browser.version <= 6) {
        $('#column-left + #column-right + #content, #column-left + #content').css('margin-left', '195px');

        $('#column-right + #content').css('margin-right', '195px');

        $('.box-category ul li a.active + ul').css('display', 'block'); 
    }

    if ($.browser.version <= 7) {
        $('#menu > ul > li').bind('mouseover', function() {
            $(this).addClass('active');
        });

        $('#menu > ul > li').bind('mouseout', function() {
            $(this).removeClass('active');
        }); 
    }
}

$('.success img, .warning img, .attention img, .information img').live('click', function() {
    $(this).parent().fadeOut('slow', function() {
        $(this).remove();
    });
}); 
});

【问题讨论】：

请详细说明您的问题——发布不起作用的示例代码并向我们展示您已经尝试过的内容。

标签： javascript jquery overlay z-index overlap

【解决方案1】：

浏览 jqzoom 源代码，缩放弹出窗口的 z-index 为 5001。您需要将下拉菜单设置为更高的值。

【讨论】：

谢谢，发现了，我也试过改变css...位置：绝对；并尝试了相对 z-index: 99999;但仍然没有快乐？ :(

【解决方案2】：

你有没有尝试过：

$("#your_dropdown_menu_id").css("z-index", 99999);

【讨论】：