代码改变世界

各浏览器中定位元素遮盖其它元素差异性

2011-03-09 09:55  李泱  阅读(241)  评论(2编辑  收藏  举报

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

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

01.container{
02    width:200px;
03    height:100px;
04    border:1px solid red;
05    position:relative;
06}
07<div class="container">
08    <input type="button" value="click me" onclick="alert('clicked');"/>
09    <div style="filter:alpha(opacity=30);opacity:0.3;
10                border:1px solid gold;position:absolute;
11                top:0;left:0;width:100px;height:50px;">
12    </div>
13</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的点击事件。

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

示例:

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


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

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

示例:


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

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

示例:

 最近在做页面的项目,收藏一下好的文章,添加自己的视野!呵呵!

转自:snandy http://www.cnblogs.com/snandy/archive/2011/03/08/1977536.html