您現在的位置: 365建站網 > 365學習 > 各瀏覽器中定位元素遮蓋其它元素差異性

各瀏覽器中定位元素遮蓋其它元素差異性

文章來源:365jz.com     點擊數:311    更新時間: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>

示例:

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (311人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 亚洲成片在线看| 爆乳无码系列肉感在线播放| 窝窝影院午夜看片| 日本乱理伦片在线观看真人| 青青精品视频国产| 天堂www天堂网| 看大片人与拘牲交| 漂亮女医生被强奷在线观看| 学生毛都没有在线播放| 国产 日本 欧美 亚洲 日韩| 女厕真实偷拍撒尿视频| 男和女全身脱了还亲嘴| 欧美性生活| 欧美大胆性生话| 国产自在自线午夜精品之la| 爱爱动图| 国产成人剧情av麻豆映画| 在线人成免费视频69国产| 久热香蕉在线视频免费| 免费人做人爱视频| 偷拍区小说区综合区| 国产网友愉拍精品视频手机| 天天澡天天添天天摸97影院| 俄罗斯6一12呦女精品| AV每日更新在线观看| 又黄又粗暴的gif动态图| 真实偷拍出租屋嫖妓正在播放| 国产精品欧美一区二区三区| 国产 日本 欧美 亚洲 日韩| 欧美第9页浮力影院| 东北60岁肥胖老熟女| http://www.carslinc.com