有时需要用绝对定位元素去遮盖其它元素。多数时候没有什么问题。如果被遮盖的元素添加了鼠标事件(如点击事件),各浏览器下表现则不太一样了。
1,绝对定位元素(未设置background)遮住Input元素,只在IE/Opera中,Input的点击事件能触发。如下代码
Div[class=container] 中有子元素Input,其添加了鼠标单击事件;另一个子元素Div设置了绝对定位,top,left都为0。这样就遮盖住了Input元素。这是点击Input,看看各浏览器中的表现:
IE6/7/8/Opera | Firefox/Safari/Chrome | |
点击Input[value=click me] | 弹出提示框:clicked | 不弹 |
很奇怪,IE6/7/8/Opera 中虽然绝对定位的div盖住了input,但点击input,仍然能触发其点击事件。而Firefox/Safari/Chrome 则不会触发。
2,绝对定位元素(设置background)遮住Input元素,所有浏览器中均无法触发Input的点击事件。如下:
这时候在所有浏览器中点击input都无法触发其点击事件,也不会弹出clicked。
3,相对定位的元素(未设置背景色)能盖住绝对定位的元素,也只在IE/Opera中能触发Input点击事件,如下:
4,相对定位的元素(设置背景色)能盖住绝对定位的元素,所有浏览器中均无法触发Input点击事件,如下:
测试浏览器版本如下:
IE6/7/8
Opera 10.10
Firefox 3.5.6
Safari 4.0.3
Chrome 4.0.266.0
Safari 4.0.3
Chrome 4.0.266.0