Question

我对z-index internet explore 8问题有疑问。我有一个主容器，里面有几个divs。我的问题是我使用javascript在主容器内的孩子divs之上创建新的divs。由于某些原因，主div边框只是新创建的div的顶部，甚至认为主容器div z-index是1.更清楚一点，这就是它在{{}}中的样子{1}}：

IE8

期望的输出..

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

我的HTML

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

CSS

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

此问题仅发生在IE8和IE7中。反正有没有解决这个问题？非常感谢！

修改：

我刚刚发现问题实际上来自我的容器#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; }中的div背景图片

div

Answer 1

<＃>“＃border”与#newDiv处于不同的堆叠上下文中 - 但它与#newDiv的父级的堆叠上下文相同。

在#newDiv的父级上设置一个位置（相对或绝对），并在其上设置一个z-index大于#border上的z-index。

Answer 2

尝试放一个空div

<div></div>

有问题的div。

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

IE8中的Html和CSS z-index问题

2 个答案: