绝对定位元素遮盖其它元素的bug

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

1，绝对定位元素（未设置background）遮住Input元素，只在IE/Opera中，Input的点击事件能触发。如下代码

Html代码  
.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>  

.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 Firefox/Safari/Chrome
点击Input[value=click me]弹出提示框：clicked不弹




很奇怪，IE6/7/8/Opera 中虽然绝对定位的div盖住了input，但点击input，仍然能触发其点击事件。而Firefox/Safari/Chrome 则不会触发。

2，绝对定位元素（设置background）遮住Input元素，所有浏览器中均无法触发Input的点击事件。如下：

Html代码  
<div class="container">  
    <input type="button" value="can't 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>  

<div class="container">
        <input type="button" value="can't 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点击事件，如下：

Html代码  
<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>  

<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点击事件，如下：

Html代码  
<div class="container">  
    <input type="button" value="can't 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>  

<div class="container">
        <input type="button" value="can't 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>  

测试浏览器版本如下：
IE6/7/8
Opera 10.10
Firefox 3.5.6
Safari 4.0.3
Chrome 4.0.266.0

推荐链接
【推荐】java 新手是如何获得“8K月薪”的？
年薪100万诚邀IT讲师

支持你一下下。。

好吧...那你说...