CSS z-index 在 IE7 中损坏答案

【问题标题】：CSS z-index broken in IE7CSS z-index 在 IE7 中损坏
【发布时间】：2010-08-21 03:11:35
【问题描述】：

我知道 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”下方，而不是上方。如果我将“底部：10px”行更改为“顶部：10px”，那么在 IE7 中 z-index 突然失败，我可以看到应该隐藏在弹出 div 下方的信息。任何人都知道为什么会发生这种情况？我发现的大多数 IE7 z-index 内容都在谈论定位，但我没有更改 CSS 定位，只是将“底部”切换为“顶部”。

【问题讨论】：

标签： css internet-explorer-7 z-index

【解决方案1】：

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

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

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

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

【讨论】：

在这种情况下，我不能使用 position:relative 因为它会在显示时将所有内容向下推。至于父母的z-index，在这种情况下哪个标签代表父母？因为我尝试在“li”标签、“ul”标签和“div class=inner”标签上将z-index设置为10001，没有任何变化。
该死的.. 父级应该是 li 标签，如果它没有改变任何东西，那么我的想法就用完了......顺便说一句，当我遇到这个问题时我使用了这个页面shawnpreisz.com/css/z-index-internet-explorer-7-ie7你的 li 有位置：相对？
好吧，我会继续尝试弄乱 div 和父级上的 position: 和 z-index: 值。我想我希望有人会知道一个秘密的 IE 错误，当你定义一个 top: 值时就会出现这个错误。还是谢谢。