4

z-index我有一个关于internet explore 8. 我有一个主容器，里面有几个divs。我的问题是我用来在主容器内的孩子之上javascript创建新的。由于某些原因，即使主容器 div是 1，主边框也只是新创建的顶部。更清楚地说，这就是它的样子：divsdivsdivdivz-indexIE8

         ----
        |    |   <--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;
}
4

2 回答 2

1

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

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

于 2013-05-08T13:28:15.827 回答
0

尝试放置一个空的 div

<div></div>

在有问题的 div 之后。

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

于 2013-05-08T12:50:21.850 回答