IE7 上的 Z 索引问题

发布于 2024-08-19 23:19:09 字数 627 浏览 7 评论 0原文

**这个问题是赏金问题,因为以下答案没有解决问题。

我正在调试 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

左岸枫 2024-08-26 23:19:09

问题在于堆叠上下文。基本上,您设置了 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.

岁吢 2024-08-26 23:19:09

尝试给出 ul 或 li height:auto。不看代码很难判断。

Try giving the ul Or the li height:auto. It's hard to tell without seeing the code.

旧人 2024-08-26 23:19:09

你似乎有几个问题。我取出了

之间的所有内容...

并用虚拟文本填充它,这样我就可以看到菜单是否超出或低于。它仍在沉没。我查看了 style.css 中 #slider 的规则,并删除了位置:规则,得到以下内容:

#slider {
Z-INDEX: 1 !important; FLOAT: left; WIDTH: 960px; HEIGHT: 296px;
}

这似乎使它起作用。然后我重新添加滑块内容,它又被破坏了。 =\

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:

#slider {
Z-INDEX: 1 !important; FLOAT: left; WIDTH: 960px; HEIGHT: 296px;
}

And that seemed to make it work. Then I added the slider content back in, and it was broken again. =\

我很坚强 2024-08-26 23:19:09
position:relative;
float:left;
height:296px;
z-index:1!important;

z-index 存在,位置需要是“绝对”并且显示“块”

position:absolute;
display:block;
z-index:1!important;

问候语

position:relative;
float:left;
height:296px;
z-index:1!important;

to z-index exists the position needs to be "absolute" and the display "block"

position:absolute;
display:block;
z-index:1!important;

greetings

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文