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。

  • 相关阅读:
    [NOIp2016] 天天爱跑步
    状压DP小拼盘
    DP × KMP
    KMP算法 详解+模板
    [NOI2014] 起床困难综合症
    [洛谷P3391] 文艺平衡树 (Splay模板)
    START
    【C】单链表的实现
    【数据结构】动态顺序表
    C语言实现扫雷程序
  • 原文地址:https://www.cnblogs.com/snandy/p/1980035.html
Copyright © 2011-2022 走看看