Html IE中的z索引背景问题

我有一个jQuery工具滚动条，设置了管理两个独立信息分区的控件——一个是图像，另一个是相关文本，需要放在带有透明bg图像的图像顶部。我使用z索引来实现这一点，我知道IE在这方面存在问题，但无法对其进行排序（在IE6-8中测试）。图片如下：

似乎覆盖的div正在接受白色的容器。不管我怎么努力，我都解决不了这个问题。HTML/CSS代码如下：

     <div id="content">

 <div id="nav"></div>

    <div class="s4 slideshow">
      <div>
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
            </div>
            <div>
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
            </div>
            <div>
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
            </div>
        </div>

  <div id="overlay_bg"></div>

  <div class="s4 information">
      <div>
       <h1>Support</h1>
    <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
    <p><a href="#">Support Us</a></p>
            </div>
            <div>
             <h1>Events</h1>
    <p>Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
    <p><a href="#">Read More</a></p>
            </div>
            <div>
       <h1>Regional</h1>
    <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
    <p><a href="#">Support Us</a></p>           
            </div>
        </div>

 </div> <!-- end of content -->

    #content { 
     height: auto;
         min-height: 300px !important;
         overflow: hidden;
         position:relative;
         margin-left: 27px;
         width: 770px;
         padding-bottom: 43px;
    }

 #nav {
  width: 60px;
  z-index: 10000;
  position: absolute;
  top:340px;
  left: 28px;
 }

 .s4 {
  width: 770px;
  height: 370px;
  overflow: hidden;
 }

 #nav a {
  background-color: transparent;
  background-image: url(images/transition.png);
  background-position: 0 0;
  text-indent: -1000em;
  width: 10px;
  height: 10px;
  display: block;
  float: left;
  margin-right: 5px;
 }

 #nav a.activeSlide {
  background-position: 0 -10px;
 }

 #overlay_bg {
  background: url(images/soild_block.png) no-repeat;
  width: 318px;
  height: 339px;
  z-index: 5000;
  position: absolute;
  top: 28px;
 }

 .information {
  position: absolute;
  top: 60px;
  left: 28px;
  z-index: 16000;
  width: 290px;
  height: 260px;
  color: #FFF;
 }

 .information h1 {
  font-size: 50px;
  font-style: italic;
  text-transform: uppercase;
 }

 .information p {
  font-size: 17px;
  line-height: 27px;
  margin-top: 37px;
 }

 .information a {
  font-size: 13px;
  padding-bottom: 2px;
  border-bottom: 1px solid;
  color: #FFF;
  text-transform: uppercase;
  font-style: italic;
 }

 .information a:hover {
  color: #000;
 }

/images/hero_1_white.jpg“width=“770”height=“367”/
/images/hero_1_white.jpg“width=“770”height=“367”/
/images/hero_1_white.jpg“width=“770”height=“367”/
支持
这是一个很好的例子，它是一个很好的例子


事件
这是一个很好的例子，因为它是一个很好的例子


区域的
这是一个很好的例子，它是一个很好的例子


#内容{
高度：自动；
最小高度：300px！重要；
溢出：隐藏；
位置：相对位置；
左边距：27px；
宽度：770px；
填充底部：43px；
}
#导航{
宽度：60px；
z指数：10000；
位置：绝对位置；
顶部：340px；
左：28px；
}
.s4{
宽度：770px；
高度：370px；
溢出：隐藏；
}
#导航a{
背景色：透明；
背景图片：url（images/transition.png）；
背景位置：0；
文本缩进：-1000em；
宽度：10px；
高度：10px；
显示：块；
浮动：左；
右边距：5px；
}
#导航a.活动滑梯{
背景位置：0-10px；
}
#覆盖层{
背景：url（images/soild_block.png）不重复；
宽度：318px；
高度：339px；
z指数：5000；
位置：绝对位置；
顶部：28px；
}
.信息{
位置：绝对位置；
顶部：60px；
左：28px；
z指数：16000；
宽度：290px；
高度：260px；
颜色：#FFF；
}
.信息h1{
字体大小：50px；
字体：斜体；
文本转换：大写；
}
.资料{
字号：17px；
线高：27px；
边缘顶端：37像素；
}
.资料a{
字体大小：13px；
垫底：2件；
边框底部：1px实心；
颜色：#FFF；
文本转换：大写；
字体：斜体；
}
.信息a：悬停{
颜色：#000；
}

---

任何帮助都将不胜感激。

这是在每个浏览器中都会发生还是仅在IE 6中发生？我在IE 7和8中测试了你的代码，它似乎覆盖了透明的div。在IE 6中，我有一些问题，比如你的图像链接看起来像什么。如果它只是在IE 6中，那么我会说它是你正在使用的透明png作为背景。其他有一些Java黑客可以用来解决这个问题。这里有一个我以前用来解决这个问题的非常好的源代码：

---

我终于解决了这个问题。代码很好-这是一个javascript问题。答案在这里解决：