此代码适用于我尝试过的所有其他浏览器,IE8除外。
IE8似乎忽略了z-index - 弹出窗口变成了pop-under。
它位于正确的位置,只是在缩略图下方呈现。
任何?
谢谢!
HTML:
<a class="thumbnail" href="#thumb">
<img src="comic_a3_thumb.jpg" height="300" width="212" border="0"
style="float:right; margin-top:10px;margin-bottom:10px;"
alt="description" />
<span>
<img src="/images/comic_a3_popup.jpg" />
</span>
</a>
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 0px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
}
答案 0 :(得分:15)
简单的答案是将z-index
值大于.thumbnail:hover
值添加到span
的悬停状态。
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
z-index: 51;
}
答案 1 :(得分:6)
将这些行放在页眉中
<!--[if IE]>
<style>
#your_faulty_div{
background-color:#000; /*any color it doesn't matter*/
filter: alpha(opacity=0);
}
</style>
<![endif]-->
your_faulty_div是由于IE z-index错误导致行为不正常的div。
工作顺利,我在我的所有项目中使用它,我已经定位元素重叠。
答案 2 :(得分:2)
如果我理解正确,您希望span
显示在标记为缩略图的元素上方。您尚未为z-index
元素指定span
。这是一个有效的例子:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Pop-up Test</title> <style type="text/css"> #vbox { border: 1px solid black; height: 200px; position: relative; width: 200px; z-index: 0; } #vbox:hover #hbox { display: block; } #hbox { border: 1px solid blue; display: none; height: 200px; left: 50px; position: relative; top: 50px; width: 200px; z-index: 1; } </style> </head> <body> <div id="vbox"> <p>Hover over this box to show a hidden "pop-up".</p> <p id="hbox">This box is a pop-up.</p> </div> </body> </html>
答案 3 :(得分:1)
解决此问题的方法是向缩略图添加一个类,如下所示:
.thumbnail:hover img.thumb {z-index:-50; position:relative;}