IE7中绝对定位元素的Z-index问题

时间:2011-09-20 13:41:21

标签: html css internet-explorer-7 positioning z-index

我有一个带有连接器div的textarea,表示用户当前状态。 connector-div是绝对定位的,因此它与textarea一起形成一个通话气泡,以象征用户“说”的内容。连接器将被放置在textarea的“顶部”(通常是更高的z-index),并且它在每个浏览器中都能正常工作,但我不幸地不得不支持IE7。在IE7中,connector-div位于textarea下方,这就是问题所在。

我在IE7中搜索了Z-index错误的问题,并尝试了一些我找到的解决方案,但没有一个解决了我的特殊情况。

我有以下简化的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-bubble-div是相对的, connector-div是绝对的z-index 4, textarea是相对的,目前没有z-index,因为它可以在任何地方工作但是ie7。 但我尝试在texarea上设置低z-index,在连接器上设置高,但是IE7有很好的堆叠..

我尝试了许多不同的解决方案,包括定位,z索引,包装元素等,但似乎没有任何效果。

有人有想法吗?

一些与此问题有关的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)
}

1 个答案:

答案 0 :(得分:0)

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

你可能不需要上升到表格,但没有你的CSS并且看到它现场很难说 - 这个或那附近会解决它!

你需要有一个有效的z-index的位置,不要担心页面上的其他z-index等...因为这是封装在表单中;当然,将值更改为您想要的任何值,但这就是排序。

<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>