CSS z-index 在 IE7 中损坏

Question

我知道 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 定位，只是将“底部”切换为“顶部”。

Answer 1

今天早上我遇到了同样的问题......你必须将元素放在 position:relative

另一种方法是将父级的 z-index 设置为更高的值...

不要问我为什么...但是它有效

编辑 抱歉..我刚刚看到你不能将位置更改为相对..尝试第二个选项并告诉我它有效