各浏览器中定位元素遮盖其它元素差异性
文章来源：365jz.com 点击数：387 更新时间：2011-03-10 22:03 参与评论
有时需要用绝对定位元素去遮盖其它元素。多数时候没有什么问题。如果被遮盖的元素添加了鼠标事件（如点击事件），各浏览器下表现则不太一样了。
1，绝对定位元素（未设置background）遮住Input元素，只在IE/Opera中，Input的点击事件能触发。
</>code
- .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的点击事件。
</>code
- <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点击事件。
</>code
- <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点击事件。
</>code
- <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>
示例:
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
