zoukankan      html  css  js  c++  java
  • 各浏览器中定位元素遮盖其它元素差异性

    有时需要用绝对定位元素去遮盖其它元素。多数时候没有什么问题。如果被遮盖的元素添加了鼠标事件(如点击事件),各浏览器下表现则不太一样了。


    1,绝对定位元素(未设置background)遮住Input元素,只在IE/Opera中,Input的点击事件能触发。

    .container{
    	200px;
    	height:100px;
    	border:1px solid red;
    	position:relative;
    }
    <div class="container">
    	<input type="button" value="click me" onclick="alert('clicked');"/>
    	<div style="filter:alpha(opacity=30);opacity:0.3;
    				border:1px solid gold;position:absolute;
    				top:0;left:0;100px;height:50px;">
    	</div>
    </div>
    

    示例:

    Div[class=container] 中有子元素Input,其添加了鼠标单击事件;另一个子元素Div设置了绝对定位,top,left都为0。这样就遮盖住了Input元素。这是点击Input,看看各浏览器中的表现

    IE6/7/8/Opera : 弹出提示框:clicked

    Firefox/Safari/Chrome : 不弹

    很神奇,IE6/7/8/Opera 中虽然绝对定位的div盖住了input,但点击input,仍然能触发其点击事件。而Firefox/Safari/Chrome 则不会触发。


    2,绝对定位元素(设置background)遮住Input元素,所有浏览器中均无法触发Input的点击事件。

    <div class="container">
    	<input type="button" value="click me" onclick="alert('clicked');"/>
    	<div style="filter:alpha(opacity=30);opacity:0.3;
    				border:1px solid gold;position:absolute;
    				top:0;left:0;100px;height:50px;background:yellow;">
    	</div>
    </div>
    

    示例:

    这时候在所有浏览器中点击input都无法触发其点击事件,也不会弹出clicked。


    3,相对定位的元素(未设置背景色)能盖住绝对定位的元素,也只在IE/Opera中能触发Input点击事件。

    <div class="container">
    	<input type="button" value="click me" onclick="alert('clicked');" style="position:absolute;"/>
    	<div style="filter:alpha(opacity=30);opacity:0.3;
    				border:1px solid gold;position:relative;
    				100px;height:50px;">
    	</div>
    </div>
    

    示例:


    4,相对定位的元素(设置背景色)能盖住绝对定位的元素,所有浏览器中均无法触发Input点击事件。

    <div class="container">
    	<input type="button" value="click me" onclick="alert('clicked');" style="position:absolute;"/>
    	<div style="filter:alpha(opacity=30);opacity:0.3;
    				border:1px solid gold;position:relative;
    				100px;height:50px;background:gray;">
    	</div>
    </div>

    示例:

  • 相关阅读:
    aps.net 图形验证码(转)
    js浮点数计算问题 + 金额大写转换
    meta标签总结
    Asp.net Session 保存到MySql中
    css3实现边框圆角样式
    iOS开发之NSOperation & NSOperationQueue
    iOS开发之多线程
    iOS开发之Block
    iOS开发之核心动画(Core Animation)
    iOS开发之CALayer
  • 原文地址:https://www.cnblogs.com/snandy/p/1977536.html
Copyright © 2011-2022 走看看