按钮和输入字段不响应鼠标事件

Question

我有这个html和css代码。 http://jsfiddle.net/Pp9Z6/

我无法弄清楚为什么我无法点击EditText和Button小部件。

Answer 1

如果右键单击编辑，并选择“检查元素”，则可以知道原因。你正在检查的元素结果是一个div。这是因为div'main-nav'几乎覆盖整个页面。

这是由于这个CSS：

div {
    position:absolute; height:100%; width:100%;
    display: table;
}

您可以通过向该CSS添加z-index: -1;来解决此问题，但真正的问题是为什么div首先存在。可能有更好的方法来对齐主导航。实际上，当我删除整个CSS定义时，它似乎工作得很好（或至少相同）：http://jsfiddle.net/Pp9Z6/2/

Answer 2

你有一个巨大的div让你不能点击输入或按钮...我强烈建议你检查你的页面布局，但如果你想解决这个特殊的问题，请将登录区域包装到div，并将其position设置为相对。它将在＃main-nav

前面

http://jsfiddle.net/Pp9Z6/3/

Answer 3

从height:100%样式中移除div规则。它与整个页面重叠。

Answer 4

div {
position:absolute; height:100%; width:100%;
display: table;

}

以上div重叠其余内容。所以你无法访问元素 只需删除position:absolute;，然后查看它是否有效或修改代码，如下所示

    div {
position:absolute; height:100%; width:100%;
display: table;
z-index:-1;

}