当前位置：首页 → 问答吧 → z-index失效放大图在小图底层

z-index失效放大图在小图底层

时间：2010-10-06

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>0.0</title> <meta name="keywords" content=" " /> <meta name="description" content=" " /> <style>/*list*/ div#content div.contentInner div.productListDetail div.List{ float:left; height:120px; border-bottom:1px dashed #B1C8D7; margin-bottom:10px; margin-top:10px; margin-left:3px; } div#content div.contentInner div.productListDetail div.List div.SmallPic{ position:relative; float:left; width:117px; padding-top:10px; } div#content div.contentInner div.productListDetail div.List div.SmallPic a img{ border:1px solid #CDCDCD; margin-left:5px; } div#content div.contentInner div.productListDetail div.List div.SmallPic div.AjaxBigPic{ display:none; height:240px; left:118px; position:absolute; top:-50px; width:300px; z-index:10000; } /*AjaxBigPic*/ div#content div.contentInner div.productListDetail div.List div.SmallPic div.AjaxBigPic div.arrow{ position:relative; top:90px; left:7px; width:13px; height:23px; background:url(http://125.91.239.99:8081/AjaxBigPic/images/arrow.gif) no-repeat center center; } div#content div.contentInner div.productListDetail div.List div.SmallPic div.AjaxBigPic div.BigPicInner{ float:right; height:236px; width:276px; background:#FFFFFF url(http://125.91.239.99:8081/AjaxBigPic/images/ajax-loader.gif) no-repeat center center; border:1px solid #CDCDCD; } div#content div.contentInner div.productListDetail div.List div.SmallPic div.AjaxBigPic div.BigPicInner img{ margin:8px; height:220px; width:260px; } /*end AjaxBigPic*/ div#content div.contentInner div.productListDetail div.List div.Name{ float:left; width:250px; margin-right:0px; overflow:hidden; } div#content div.contentInner div.productListDetail div.List div.Name span{ float:left; width:246px; margin-top:5px; } div#content div.contentInner div.productListDetail div.List div.Name span a{ font-size:14px; font-weight:bold; color:#36C; } div#content div.contentInner div.productListDetail div.List div.Name span a:hover{ font-size:14px; color:#FF5500; } div#content div.contentInner div.productListDetail div.List div.Name span.companyName a{ font-weight:normal; } div#content div.contentInner div.productListDetail div.List div.location{ float:left; width:60px; margin-right:30px; font-size:14px; color:#36C; line-height:100px; } div#content div.contentInner div.productListDetail div.List div.location span{ float:left; width:50px; font-weight:bold; font-size:14px; color:#36C; line-height:100px; } div#content div.contentInner div.productListDetail div.List div.Price{ float:left; width:100px; padding-top:35px; } div#content div.contentInner div.productListDetail div.List div.Price span{ float:left; width:100px; height:18px; color:#B92300; font-size:12px; } div#content div.contentInner div.productListDetail div.List div.Name div.infomation { float:left; width:245px; padding-top:8px; } div#content div.contentInner div.productListDetail div.List div.Name div.infomation span{ float:none; width:80px; height:18px; color:#B92300; font-size:12px; margin-right:40px; } div#content div.contentInner div.productListDetail div.List div.Name div.infomation span img{ width:13px; height:14px; margin-right:3px; } div#content div.contentInner div.productListDetail div.List div.Name div.infomation span a{ color:#3366CC; font-weight:normal; font-size:12px; } div#content div.contentInner div.productListDetail div.List div.Name div.infomation span a:hover{ color:#FF5500; font-weight:normal; font-size:12px; } div#content div.contentInner div.productListDetail div.List div.showmation{ margin-top:35px; } div#content div.contentInner div.productListDetail div.List div.showmation span{ float:left; width:80px; height:18px; padding-top:0px; } div#content div.contentInner div.productListDetail div.List div.showmation span a{ color:#36C; font-size:12px; font-weight:bold; height:18px; } div#content div.contentInner div.productListDetail div.List div.showmation span a:hover{ color:#F50; } /*showTJSP */</style> <script src="http://125.91.239.99:8081/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="http://125.91.239.99:8081/js/jquery.tools.min.js" type="text/javascript"></script> <script type="text/javascript">$(function() { $("div.SmallPic").hover(function(){ //绑定class为smallPic的鼠标滑动动作 PicId = $(this).attr("id"); //获取触发动作的元素id PicId = PicId.replace("productId",""); //对id进行字符串处理 BigPicDiv = $(this).children("div.AjaxBigPic"); //获取大图显示层外层 BigPicInner = $(BigPicDiv).children("div.BigPicInner"); //大图显示层内层 if($(BigPicInner).children("img").length <=0 ){ //判断是否已经读取了图片，以及是否有dom， //alert("没有图片") //没有图片则通过传输产品id值，异步读取图片 $.ajax({ type: "get", data: {ID:PicId} , url: "/AjaxBigPic/getBigImg.aspx", beforeSend: function(XMLHttpRequest){ }, success: function(data, textStatus){ $(BigPicInner).html(data); }, complete: function(XMLHttpRequest, textStatus){ //HideLoading(); $("div.SmallPic div.AjaxBigPic").hide(); // 显示之前先隐藏掉其他的大图层避免冲突 $(BigPicDiv).show(); }, error: function(){ //请求出错处理 } }); } else{ //已读取图片以及dom则直接显示 $(BigPicDiv).show(); } }, function(){ $(BigPicDiv).hide(); }); });</script> </head> <body> <div id="container"> <div class="blank-all"></div>  <div id="content"> <div class="contentInner"> <div class="productListDetail"> <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>   <div class="List"><div class="SmallPic" id="productId2922"><div class="AjaxBigPic" style="display: none;"><div class="arrow"></div><div class="BigPicInner"></div></div><a href="#" target="_blank"><img height="85px" width="100px" alt="混合型学生装雪批" src="http://125.91.239.99:8081/upload/spro/201078165754515.jpg"></a></div><div class="Name"><span><a href="showInnerDetail.aspx?id=2922&memberid=214616" target="_blank">混合型学生装雪批</a></span><span class="companyName"><a href="#" target="_blank">普宁市益君嘉食品有限公司</a> </span><span class="companyName">[已核实] </span><div class="infomation"><span><a href="#" target="_blank">企业信息</a></span><span><a href="#" target="_blank">联系方式</a></span></div></div></div>  <div class="clear"></div> </div>  </div> </div>  </div> </body> </html>
提示：您可以先修改部分代码再运行

高手，帮我看看是哪里出了错，小女子谢过

[ 本帖最后由 ss870727 于 2010-10-6 15:46 编辑 ]

附件

error.jpg (65.03 KB)

2010-10-6 15:39

作者: ss870727 发布时间: 2010-10-06

主要是IE的渲染bug。
顺着这篇文章的链接去了解下：无法冲破的z-index等级

解决办法：首先删除.smallPic中的position:relative;

然后在你的那个触发器hover的两个function中分别设置：

复制内容到剪贴板

代码:

$("div.SmallPic").hover(
function(){
      ......
      $(this).css('position','relative');
      ......
},
function(){
      ......
      $(this).css('position','static');
      ......
}
)

这样，鼠标移上去才设置相对定位，就不会被其它元素遮挡了。

[ 本帖最后由 yoom 于 2010-10-6 20:16 编辑 ]

作者: yoom 发布时间: 2010-10-06