CSS z-index 在 IE7 中损坏
我知道 IE7 中的 z-index 问题，但我这里遇到了一个奇怪的情况，网上建议的修复似乎都不起作用。我有一个项目列表，每个项目的“li”标签内都有一个弹出气泡 div，如下所示：
<div class="inner">
<ul>
<li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
<img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
Asthma,
<small id="year5661">1974</small>
<div class="mouseover-bubble orange" id="bubble_5661" style="display:none;">
<h6>Asthma</h6>
<div class="definition">
<p>A form of bronchial disorder....</p>
</div>
</div>
</li>
</ul>
</div>
这是相关的 CSS：
div.mouseover-bubble {
position: absolute;
width: 360px;
left: 10px;
bottom: 10px;
z-index: 10000;
}
只要我保留 CSS 的接收方式，弹出的 -起来工作正常。但我被要求将弹出 div 移动到匹配的“li”下方，而不是上方。如果我将行“bottom: 10px”更改为“top: 10px”，那么在 IE7 中，z-index 会突然失败，我可以看到应该隐藏在弹出 div 下方的信息。任何人都知道为什么会发生这种情况？我发现的大多数 IE7 z-index 内容都涉及定位，但我没有更改 CSS 定位，只是将“底部”切换为“顶部”。
I'm aware of the z-index problem in IE7, but I have a strange situation here, and none of the fixes suggested online seem to work. I've got a list of items, each one has a pop-up bubble div inside the "li" tag, like so:
<div class="inner">
<ul>
<li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
<img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
Asthma,
<small id="year5661">1974</small>
<div class="mouseover-bubble orange" id="bubble_5661" style="display:none;">
<h6>Asthma</h6>
<div class="definition">
<p>A form of bronchial disorder....</p>
</div>
</div>
</li>
</ul>
</div>
Here is the relevant CSS:
div.mouseover-bubble {
position: absolute;
width: 360px;
left: 10px;
bottom: 10px;
z-index: 10000;
}
As long as I leave the CSS the way I received it, the pop-up works fine. But I've been asked to move the popup divs below the matching "li", instead of above it. If I change the line "bottom: 10px" to "top: 10px", then suddenly in IE7 the z-index fails and I can see the information that should be hidden underneath the pop-up div. Anyone have ideas why this would happen? Most of the IE7 z-index stuff I find talks about positioning, but I'm not changing the CSS positioning, just switching "bottom" to "top".
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我这次停泊也遇到了同样的问题...您必须将元素放在
position:relative中另一种方法是将父级的 z-index 设置为更高的值...
不要问我为什么...但它有效
编辑抱歉..我刚刚看到你无法将位置更改为相对..尝试第二个选项并让我知道它有效
i got the same problem this moorning... you'll have to put the element in
position:relativeAnother way to do it is to set the parent's z-index to something higher...
dont ask me why... but it works
EDIT sorry.. i've just seen that you cant change the position to relative.. try the second option and let me know it that works