一旦元素被另一个元素覆盖，可点击事件不再触发

Question

简单的例子，

我有两个 div

<div id="two"></div><div id="one"></div>

CSS 是

#one{
     position: absolute;
 left: 3px;
 top: 3px;
 width: 100px;
 height: 100px;
 background: red;   
}

#two{
    position: absolute;
    width: 20px;
    height: 20px;
    background: blue;
}

事件处理程序：

$("#two").click(function(){
alert("test")
})

因为二被一覆盖，因为二在二之后。

两个不再可点击。

我知道如何解决这个问题的唯一方法就是扭转它们。

<div id="one"></div><div id="two"></div>

但我将为我的应用程序动态生成这些分区。所以分工必须紧随其后。

关于这个问题的任何想法或建议

这是http://jsfiddle.net/Sca2c/4/的实时示例

Answer 1

使用 CSS 属性 z-index。

z-index 定义了网页的层级，因此z-index 为2 的元素位于z-index 为1 的元素之上。