IE7 上的 Z 索引问题
**这个问题是赏金问题,因为以下答案没有解决问题。
我正在调试 IE7 中的页面并遇到一个问题。当您将鼠标悬停在导航链接上时,下拉列表会落在其下方的幻灯片下方。下拉菜单 ul 绝对定位,z-index 为 10,滑块相对于其父级定位,z-index 为 1。#slider 中的某些内容导致菜单落后于它。
你可以在vitaminjdesign.com/search查看它
我使用jquery来更改每个孩子的z索引#slider:
$(function() {
$('.jFlowSlideContainer').css('z-index', '1');
})
$(function() {
$('#jFlowSlide').css('z-index', '1');
})
$(function() {
$('#slides').css('z-index', '1');
})
尽管如此,在 IE7 中,子菜单位于滑块后面。也许问题出在菜单脚本中?
**this question is on bounty because the below answers did not solve the problem.
I am debugging a page in IE7 and have run into one problem. When you hover over a nav link, the dropdown falls below the slide below it. The dropdown ul is positioned absolutely with a z-index of 10 and the slider is positioned relative to its parent with a z-index of 1. Something within the #slider is causing the menu to fall behind it.
You can view it at vitaminjdesign.com/search
I used jquery to change the z-indexes of every child of #slider:
$(function() {
$('.jFlowSlideContainer').css('z-index', '1');
})
$(function() {
$('#jFlowSlide').css('z-index', '1');
})
$(function() {
$('#slides').css('z-index', '1');
})
Still, in IE7, the submenu sits behind the slider. Perhaps the problem is lying in the menu script?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
问题在于堆叠上下文。基本上,您设置了 z-index(至 9)的
#menu li
元素与#slider
元素(您在其上设置了 z-index)不在同一堆栈上下文中。将 z 索引设置为 1)。一个快速的解决方案是将#header
元素的 z-index 设置为 2,但我建议您阅读堆叠上下文。The problem is with stacking contexts. Basically the
#menu li
elements on which you have set a z-index (to 9) are not in the same stacking context as the#slider
element (on which you have set z-index to 1). A quick solution would be to set the z-index of your#header
element to 2, however I'd recommend reading up on stacking contexts.尝试给出 ul 或 li height:auto。不看代码很难判断。
Try giving the ul Or the li height:auto. It's hard to tell without seeing the code.
你似乎有几个问题。我取出了
并用虚拟文本填充它,这样我就可以看到菜单是否超出或低于。它仍在沉没。我查看了 style.css 中 #slider 的规则,并删除了位置:规则,得到以下内容:
这似乎使它起作用。然后我重新添加滑块内容,它又被破坏了。 =\
You seem to have several problems. I took out everything between
<div id='slider'> ... </div>
and filled it with dummy text, so i could see if the menu was going over or under. It was still going under. I had a look at the rules in style.css for #slider, and removed the position: rule, to get the following:And that seemed to make it work. Then I added the slider content back in, and it was broken again. =\
z-index 存在,位置需要是“绝对”并且显示“块”
问候语
to z-index exists the position needs to be "absolute" and the display "block"
greetings