即7-9不显示位置：绝对正确答案

【问题标题】：Ie 7-9 not displaying position:absolute correctly即7-9不显示位置：绝对正确
【发布时间】：2011-11-12 00:06:03
【问题描述】：

我有一个带有 z-index:1-100（用 javascript 更改）和 position:absolute 的 div。在里面我有一个带有 z-index:101 和 position:absolute 的 href。

所有 webbbrowsers 都将其呈现为带有 101 的那个显示在顶部（正确）但在 IE 7-8-9 中它没有...为什么会这样？真的可以在这里使用一些帮助！

代码：

     <div id="bannerad">
     <a target="_blank" style="position:absolute;z-index:101;width:680px;height:120px;" class="mcdFade" href="http://www.mcdonalds.se"></a>
     <div id="fadea" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/1.jpg" width="800" height="120" alt="Fade"/></div>
     <div id="fadeb" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/2.jpg" width="800" height="120" alt="Fade"/></div>
     <div id="fadec" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/3.jpg" width="800" height="120" alt="Fade"/></div>   
     </div>

编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

由视觉工作室生成

编辑 2 添加了 jsfiddle http://jsfiddle.net/Pesmd/18/ 但无法使其正常工作，您只能看到轻微的图像，但它可以在我的浏览器中运行

编辑 3 这似乎是 IE 中的一个主要问题，我尝试了我找到的解决方案，但没有结果。这里有没有可以帮助我解决这个问题的？

据我所知，当您有一个父级的位置不是默认设置时，z-index 属性会重置，但我仍然无法让它工作。

【问题讨论】：

你在 IE 中声明了文档类型吗？
似乎无法让它在 jsfiddle jsfiddle.net/Pesmd/18 中工作
很抱歉，但它太复杂了，我不想花时间尝试修复它。我已经删除了我的答案。
看到这个问题 - stackoverflow.com/q/798482/144496
检查了，我看不出问题的相似之处。他们的问题在于位置：相对；在绝对位置内，反之亦然。

标签： css internet-explorer position z-index absolute

【解决方案1】：

将锚设置为 display:block 看看是否有效。然后在测试时在元素上添加一个 3px 大的绿色边框，以便更好地看到它。

【讨论】：

【解决方案2】：

为什么不将链接包裹在 div 周围？

<div id="bannerad"> 
    <a target="_blank" style="position:absolute;z-index:101;width:680px;height:120px;" class="mcdFade" href="http://www.mcdonalds.se">
        <div id="fadea" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/1.jpg" width="800" height="120" alt="Fade"/></div>
        <div id="fadeb" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/2.jpg" width="800" height="120" alt="Fade"/></div>
        <div id="fadec" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/3.jpg" width="800" height="120" alt="Fade"/></div>
    </a>
</div>

编辑：我看了你的小提琴并使它工作。它的设计与您想要的不同，但它很简单，无需担心 z-index 即可完成工作：http://jsfiddle.net/kCsvG/3/

【讨论】：