IE7 中绝对定位元素的 Z 索引问题

Question

我有一个带有连接器 div 的文本区域，表示用户当前状态。连接器 div 是绝对定位的，因此它与文本区域一起形成一个谈话气泡来象征用户正在“说”的内容。连接器将放置在文本区域的“顶部”（通常是较高的 z-index），它在每个浏览器中都可以正常工作，但不幸的是我必须支持 IE7。在 IE7 中，connector-div 放置在文本区域下方，这就是问题所在。

我在 IE7 中搜索了 Z-index bug 的问题，并尝试了几种找到的解决方案，但没有一个解决方案适合我的特定情况。

我有以下简化的 html：

“

  <form class="current-status">
    <div class="talk-bubble">
      <div class="connector"> "Absolute positioned with high z-index.." </div>
      <textarea> "User status goes here" </textarea>
    </div>
  </form>

”

current-status-div 只是静态定位， talk-buble-div 是相对的， Connector-div 是绝对的，z-index 为 4， textarea 是相对的，目前没有 z-index，因为它可以在除 ie7 之外的任何地方使用。 但我尝试在 texarea 上设置低 z-index，在连接器上设置高 z-index，但 IE7 的堆叠很奇怪。

我尝试了很多不同的解决方案，包括定位、z-indexing、包装元素等，但似乎没有任何效果。

有人有主意吗？

一些与该问题相关的CSS：

.content-box-plate {
    position: relative;
    z-index: auto;
}

.talk-bubble {
    position: relative;
    z-index: auto;
}

.connector {
    background: url("/images/portal/bubble_connector.png?1314369295") no-repeat scroll center center transparent;
    height: 12px;
    position: absolute;
    right: 5px;
    width: 21px;
    z-index: 4;
}
textarea {
    font-size: 13.5px;
    font-style: italic;
    height: 40px;
    line-height: 1.25em;
    overflow: auto;
    padding: 6px 6px 6px 8px;
    position: relative;
    width: 165px;
    z-index: auto (tried to put a specific value lower than connectors without effect)
}

Answer 1

如果没有您的代码，很难回答，但是您还需要在父 div 上设置 z-index，这是我在 IE6/7 中修复的常见问题，因为我也必须支持它们。

你可能不需要走到表单那么远，但是如果没有你的 css 并看到它的实时效果，很难说 - 这个或类似的东西会修复它！

您需要位置才能拥有有效的 z 索引，不用担心页面上的其他 z 索引等。因为这是封装在表单中的；当然，将值更改为您想要的任何值，但这就是排序。

<form class="current-status" style="position:relative; z-index:1;">
    <div class="talk-bubble" style="position:relative; z-index:1;">
      <div class="connector" style="position:absolute; z-index:2"> "Absolute positioned with high z-index.." </div>
      <textarea style="position:relative; z-index:1"> "User status goes here" </textarea>
    </div>
</form>