Opera 通过点击重叠按钮

Question

<div style="width: 100px; height: 25px; position: relative;">
    <input type="button" style="width: 100px; height: 25px;" onclick="alert(1);" value="Input"/>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3;"></div>
</div>
<br/>
<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Button</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3;"></div>
</div>

当我在 Opera 11.01 中单击第一个按钮 () 时，没有按下按钮，因为下一个

与 重叠。但是，如果我单击第二个按钮（），它会在视觉上被按下（不调用事件 OnClick）。仅在 Opera 中观察到此类行为，在 Firefox 和 Chrome 中行为是正常的 - 未按下按钮。怎么了？

Example on jsFiddle

更新： 行为：

• 单击 Chrome 中的第一个按钮。它不可点击，不会出现警报。 正确；
• 单击 Chrome 中的第二个按钮。它不可点击，不会出现警报。 正确；
• 单击 Opera 中的第一个按钮。它不可点击，不会出现警报。 正确；
• 单击 Opera 中的第二个按钮。按钮视觉点击（！！） - 按钮的样式更改为“按下”状态，不出现警报。 不正确 - 不应按下按钮，因为它被 div 阻止。行为应与第一个按钮一致；

【问题讨论】：

• 在 Chrome 12 Dev 上，我没有收到任何 alert() 消息。

Answer 1

尝试在 div 上添加 z-index

<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Inpute</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3; z-indeX: -1;"></div>
</div>
<br/>
<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Button</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3; z-index: -1;"></div>
</div>

更新：JsFiddle