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设置为更高的值......

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

编辑抱歉..我刚刚看到您无法将位置更改为亲戚..尝试第二个选项让我知道它有效

在IE7中打破了CSS z-index

1 个答案: