Question

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

所有webbbrowsers呈现这一点，因为101显示在顶部（正确）但是在7-8-9它没有......为什么呢？真的可以在这里使用一些帮助!!

CODE：

     <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">

由visual studio生成

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

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

我所知道，当你的父母的位置为默认设置为默认值时，z-index属性会重置，但我仍然无法让它工作。

Answer 1

设置锚点显示：阻止查看是否有效。然后在测试时在元素上添加一个大的3px绿色边框，以便您可以更好地看到它。

Answer 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/

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

2 个答案: