您现在的位置: 365建站网 > 365学习 > 各浏览器中定位元素遮盖其它元素差异性

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

文章来源:365jz.com     点击数:268    更新时间:2011-03-10 22:03   参与评论

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


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

JavaScript;gutter:true;>.container{
	width: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;width: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的点击事件。

HTML;gutter:true;><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;width: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;
				width: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;
				width:100px;height:50px;background:gray;">
	</div>
</div>

示例:

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (268人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------