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

【问题标题】：Why won't my div sit on top of my image in ie7?为什么我的 div 不能放在 ie7 中的图像之上？
【发布时间】：2012-05-02 12:45:31
【问题描述】：

我知道 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..

【问题讨论】：

尝试绝对位置#view或在dom中切换位置，以便#toggle-view出现在#view之后。
谢谢，但我已经尝试了这两个.. 都没有用:-(

标签： html css internet-explorer-7

【解决方案1】：

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

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

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

【讨论】：

谢谢骗了。 div 应该位于顶部，就像在图像顶部的堆栈中一样。它也位于右侧。
我已经更新了我的答案以包含我的解决方案的屏幕截图，这不是你在 IE7 中使用 jsfiddle 得到的吗？
谢谢trickee - 这就是我所追求的。然而，在我的网站上复制它是一个真正的问题！我认为这可能与图像的样式有关..我会再玩一次，看看我能做什么
尝试给你的图片一个最大宽度：100%；如果你想让它填满容器的整个宽度。
在我的网站上下文中，图像只占屏幕的一半并且位于右侧，而 .copy div 包含一些文本。我想我可能需要在它上面设置一个宽度 - 我现在会尝试并报告回来。我会将您的回复标记为答案，因为您已经清楚地让它在 ie7 中工作。谢谢。