隐藏在 JQuery 幻灯片后面的 JQuery 导航栏答案

【问题标题】：JQuery navbar hidden behind JQuery slideshow隐藏在 JQuery 幻灯片后面的 JQuery 导航栏
【发布时间】：2011-07-17 00:07:58
【问题描述】：

我有一个 JQuery 下拉菜单，它隐藏在其正下方的 JQuery 幻灯片后面，here。

我需要把下拉菜单放在顶部...我试过 z-index 没有效果。

从我的研究中可以看出，这是一个相当普遍的问题......有人可以帮忙吗？

代码：

#nav {
width:800px;
margin:0px auto 0px;
height:25px;
}

#nav ul {
height:25px;
margin:0 0px 0 0;
padding:0;
list-style:none;
}

#nav ul li {
background:#76bf43;
padding:5px 0px 0px 0px;
margin:0 10px 0 0;
color:#ffffff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width:100px;
text-align:center;
height:20px;
float:left;
}

#nav ul li:hover {
cursor:pointer;
}

#nav ul li ul {
margin:0;
padding:0;
}

#nav ul li ul li {
padding:0;
margin:0;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
height:25px;
}



<link rel="stylesheet" type="text/css" href="aaa-styles.css" />

<script src="jq.js"></script>

<script src="jquery.easing.1.3.js"></script>
<script src="jquery.timer.js"></script>
<script src="image-rotator.js"></script>



<script src="hoverIntent.js"></script> 
<script src="superfish.js"></script> 


<script> 

$(document).ready(function(){ 
    $("ul.sf-menu").superfish(); 
}); 

</script>


</head>



<body>

<script>
$(document).ready(function(){

//This keeps track of the slideshow's current location
var current_panel = 1;
//Controlling the duration of animation by variable will simplify changes
var animation_duration = 2500;

$.timer(6000, function (timer) {
    //Determine the current location, and transition to next panel
    switch(current_panel){
        case 1:
            $("#slideshow").stop().animate({left: "-800px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
            current_panel = 2;
        break;
        case 2:
            $("#slideshow").stop().animate({left: "0px", top: "-210px"}, {easing: 'easeOutBack', duration: animation_duration});
            current_panel = 3;
        break;
        case 3:
            $("#slideshow").stop().animate({left: "-800px", top: "-210px"}, {easing: 'easeOutBack', duration: animation_duration});
            current_panel = 4;
        break;
        case 4:
            $("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
            current_panel = 1;
        break;
        timer.reset(12000);
    }
});

});
</script>

【问题讨论】：

在 Chrome 或 Safari 中使用开发者模式来解决此问题。使用它，您可以看到应用于动态创建的元素的确切样式...

标签： jquery css superfish

【解决方案1】：

我只能猜你在错误的元素上尝试z-index。试试看吧。

#nav {
    position: relative;
    z-index: 40000;
}

您应该会发现这可以解决您的问题。

【讨论】：

我在 z-ing 正确的元素，但我遗漏了位置：相对。感谢您唤醒我的记忆！

【解决方案2】：

为#nav ul 添加position:relative;z-index:1;

z-index 始终适用于定位元素，因为 css 文档告诉我们。

阅读更多here。

【讨论】：