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

我有一个带有连接器div的textarea，代表用户当前的状态。 connector-div是绝对定位的，因此它和textarea一起形成一个谈话泡泡来象征用户“说”什么。该连接器将被放置在textarea的“顶部”（通常是一个更高的z-index），并且它在每个浏览器都能正常工作，但我不幸得支持IE7。在IE7中，连接器div位于textarea下方，这就是问题所在。在IE7中绝对定位元素的Z索引问题

我已经用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>

”

当前状态-DIV只是静态的定位，通话泡沫DIV是相对的，连接器 - 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) 
}

来源

2011-09-20 user954829

CSS在哪里？似乎很奇怪的问一个关于CSS的问题，而不是发布它.. – Kyle

如果你期待的答案，你应该definetely添加你的CSS，甚至更好的演示在[JSFIDDLE]（http://jsfiddle.net/） – Gatekeeper

请提供指向您网页的链接或[jsFiddle]（http://jsfiddle.net/）/ [JS Bin]（http://jsbin.com/）演示。要明确：我想要一个现场演示，我可以使用IE的开发工具。 – thirtydot

没有你的代码，但其很难回答，你需要设置父的div的z-index的为好，它的一个共同的问题，我修复IE6/7因为我也必须支持他们。

你可能不需要去尽可能远的形式，但没有你的CSS，看到它的生活很难说 - 这或大约会修复它！

你需要位置有一个有效的z-索引，不要担心页面上的其他z-index etc ..因为这是封装在窗体内;当然可以将价值改变为任何你想要的，但这是订购。

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

来源

2011-09-20 16:41:19 Stryder

明天会尝试，谢谢：） – user954829

根据您的建议更改了定位和索引，并且textarea仍位于IE7中的连接器顶部，但在其他任何地方都可以使用（与大多数解决方案一样）。将不得不尝试找出解决方法..无论如何谢谢你的建议！ – user954829

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

回答

相关问题