在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索引問題

回答

相關問題