html - 为什么我的 div 不能放在 ie7 中的图像之上？

Question

我知道 ie7 z-index 错误，但我仍然无法让 div 位于 ie 中的图像之上。这是我拥有的当前代码：

<div id="wrapper">
  <div id="content">
    <div class="copy">...</div>
    <div id="toggle-view"></div>
    <img id="view" src="/..." />
  </div>
</div>

这是样式：

#wrapper { width: 960px; margin: 0 auto 0 auto; background: #fff; }
#content { width: 960px; height: 555px; position: relative; z-index: 20; }
#toggle-view { display: block; width: 150px; height: 25px; cursor: pointer; position: absolute; top: 12px; right: 10px; z-index: 10; }
#view { width: 722px; height: 555px; position: relative; z-index: 1; }

这在 Chrome/FF 等中运行良好，但不适用于 ie7。如何让#toggle-view div 位于#view img 之上。

谢谢

编辑：好的，我想通了。出于某种原因，如果元素没有设置“背景”属性，它将无法在 ie 中正确处理 z-indexes（任何版本似乎......甚至 9）。天哪，我非常讨厌IE..

Answer 1

当您说在顶部时，您的意思是您希望 div 位于其之上或之上？

我使用您的代码创建了一个 jsfiddle http://jsfiddle.net/trickeedickee/wPz2X/，它在 IE7 中运行良好，您的 #toggle-view div 位于容器的右侧，这是故意的。让我知道这是否是答案，如果不是，我会尝试为您提供更多帮助。

为了 100% 清楚，我在 IE7 中附上了 jsfiddle 的屏幕截图。我的#toggle-view 位于图像的左侧，就像图层堆栈一样。它清楚地位于图像的顶部。这不是你想要的结果吗？