Firefox/Safari/Chrome绝对定位元素重叠造成不可点击问题
51ditu地图网站开发过程中碰到的,Firefox/Safari/Chrome下(无论诡异模式或标准模式)当两个绝对定位的div发生重叠(即一个div盖在另一个div上)时,下面的div变得不可点击了。解决的方法是设置z-index,z-index值大的就可以点击了。而IE下,即使z-index值高的div,下面的div中的button仍然可以点击。
<!DOCTYPE HTML> <html> <head> <title>Firefox/Safari/Chrome绝对定位元素重叠造成不可点击问题</title> <meta charset="utf-8"> <style type="text/css"> #d1{ position:absolute; top:15%; left:41%; width:200px; height:100px; border:1px solid gray; padding:5px; /*z-index:1;*/ } #d2{ position:absolute; top:25%; left:40%; width:230px; height:130px; border:1px solid red; /*z-index:2;*/ } </style> </head> <body> <div id="d1"> <input type="button" value="查询" onclick="alert(3);"> </div> <div id="d2"></div> </body> </html>
Firefox/Safari/Chrome 中点击查询按钮没反应,IE/Opera中则弹出3。