zoukankan      html  css  js  c++  java
  • 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%;
    			200px;
    			height:100px;
    			border:1px solid gray;
    			padding:5px;
    			/*z-index:1;*/
    		}
    		#d2{
    			position:absolute;
    			top:25%;
    			left:40%;
    			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。

  • 相关阅读:
    PL/SQL Developer 和 instantclient客户端安装配置(图文)
    VirtualBox + Centos 使用NAT + Host-Only 方式联网
    zookeeper的安装
    Socket编程基础篇
    WebSocket教程(二)
    WebSocket教程(一)
    Js判断浏览器类型
    JVM内存模型
    js 正则去除指定的单词
    Java线上应用故障排查之一:高CPU占用
  • 原文地址:https://www.cnblogs.com/snandy/p/1980035.html
Copyright © 2011-2022 走看看