IE8中的Html和CSS z-index問題

我對internet explore 8有z-index問題有疑問。我有一個主容器，裏面有幾個divs。我的問題是，我使用javascript在主容器內部的子項divs上創建新的divs。對於一些原因主要div邊境只有新創建的div頂部甚至認爲主要div容器z-index 1。要更清楚，這就是它看起來像在IE8：IE8中的Html和CSS z-index問題

  ---- 
     | | <--newly created div generated by js 
----------------- 
|  | | | 
|  ---- | 
|    | 
|    | 
-----------------

所需的輸出..

  ---- 
     | | <--newly created div generated by js 
--------| |--- 
|  | | | 
|  ---- | 
|    | 
|    | 
-----------------

我的HTML

<div id='container'> 

    <div> 
    <a href='#'/> //hover to a will generate a new div. //before hover 

    <a href='#'> // <- after hover to the link 
     <div id='newDiv'> 
     contents.... 
     </div> 
    </a> 
    </div> 

</div>

CSS

#container{ 
    background-color: #FFFFFF; 
    border: 1px solid #364B78; 
    position: relative; 
    padding: 10px; 
    clear: both; 
    min-height: 200px; 
    z-index: 1; 
} 

#newDiv{ 
    position: absolute; 
    background-color: red; 
    top: -175px; 
    left: 50px; 
    width: 200px; 
    height: 150px; 
    z-index: 1000; 
    padding: 8px; 
}

此問題僅發生在IE8和IE7中。有沒有辦法解決這個問題？非常感謝！

編輯：

我剛剛發現這個問題實際上是從div的背景圖片在我的容器div

<div id='container'> 

    <div> 
    <a href='#'/> //hover to a will generate a new div. //before hover 

    <a href='#'> // <- after hover to the link 
     <div id='newDiv'> 
     contents.... 
     </div> 
    </a> 
    <div id='border'></div> //this is the problematic div 
    </div> 

</div> 


css 

#border { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:4px; 
    width:100%; 
    background-image:url(/images/top.gif); 
//the top.gif is a 2px height and 100% width image which on top of the new div 
    z-index: 1; 
}

來源

2013-05-06 Rouge

該代碼似乎應該工作。你有沒有嘗試添加縮放：1;到#container和#newDiv CSS（我記得IE的老版本有一些奇怪的問題圍繞重繪，並添加縮放：1;有時可以修復它）。這也可能是一個相關的問題：http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues – Sean 2013-05-06 20:47:28

這聽起來像本地堆棧上下文的問題（這往往發生在舊版本的IE）。如果是這樣的話，你需要顯示每個相關元素的CSS和HTML，其位置值爲'relative'或'absolute'，或者是'auto'以外的'z-index'值。最簡單的方法是創建一個演示（使用像[jsfiddle]（http://jsfiddle.net）這樣的在線服務），並在該問題中添加一個演示鏈接;或者，添加一個鏈接到實時頁面。 – 2013-05-06 20:52:28

儘管存在I8/9問題，但爲什麼要將堆棧級別值（z-index）應用於.container？處於相對位置將生成新的堆棧上下文。順便說一下，如果您將顯示值：block應用於正在接收內部div的，它會看起來更乾淨。是內聯級別的元素，除非您修改其顯示值，否則不應在內部包含塊級元素。 – Fico 2013-05-06 21:30:04

嘗試把一個空div

<div></div>

後有問題的部分。

http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/

來源

2013-05-08 12:50:21

「#border」是不是#newDiv不同的堆疊內容 - 但它是在＃newDiv的父母一樣堆疊內容。

在＃newDiv的父級上設置一個位置（相對或絕對），並在其上設置大於#border上的z-index的z-index。

來源

2013-05-08 13:28:15 Adam

IE8中的Html和CSS z-index問題

回答

相關問題