我在Div中的表格是不可点击的

Question

我有一个wordpress主题，我已经在标题中添加了一个客户登录div ...

由于某种原因，无法输入输入电子邮件地址和密码的框，但我可以点击提交按钮。

我错过了什么吗？

这是正在使用的CSS：

.art-header {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  margin: 0 auto;
  height: 290px;
  background-image: url('images/object617858221.png'), url('images/header.jpg');
  background-position: 70px 182px, 0 0;
  background-repeat: no-repeat;
  position: relative;
  z-index: auto !important;
}

.art-shapes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.client-login {
  width: 214px;
  margin: 100px 10px 0 0;
  float: right;
  text-align: right;
  font-size: 20px;
  color: #fff;
  z-index: 1000;
}

这是构成标题区

的代码

<header class="art-header"><?php get_sidebar('header'); ?>
<div class="client-login">
<div class="client-header">Client Login</div>
<form method="post" action="https://secure.mysite.it/dologin.php">
<input type="text" name="username" style="width: 200px; margin-bottom:5px;" value="Enter Email Address" /><br />
<input type="password" name="password" style="width: 200px; margin-bottom:5px;" /><br />
<input class="art-button" type="submit" value="Login" />
</form>
</div></header>

我的网站（http://goo.gl/YcugjZ）

Answer 1

我还没有查看你的表格，但这是我可以从经验中告诉你的。

通常当东西不是可点击的时候＆＃34;或者＆＃34;可专注的＆＃34;在它之上有某种元素＆＃34;＆＃34;。当您有负边距，绝对定位或其他时髦的东西时，通常会发生这种情况。

见图：

红色框是＆＃34;冲突的＆＃34; div，并防止单击文本框。

查明是否是这种情况的最简单方法是，只需右键单击文本框，然后转到＆＃34; Inspect element＆＃34;或类似的（取决于浏览器）。如果您可以在登录框中提供链接或小提琴，那就太棒了。

---

更新。 OP网站here。

我上面描述的问题确实是问题。

在网站上，您可以找到以下内容

<div class="art-shapes">

</div>

CSS规则集如下：

.art-shapes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

检查时，您可以看到它确实覆盖了输入

我的建议是删除div.artshapes - 元素，因为它实际上没有做任何事情。

Answer 2

我在这里创建了一个有效的jsfiddle http://jsfiddle.net/x0ybkpn8/

我可以点击并修改输入字段值，而无需更改原始代码。

如果没有看到不起作用的实际页面或代码，就很难猜出问题所在。

也许一个不可见的元素覆盖在输入字段的顶部，使用户无法单击它们。

我会检查周围的元素，看看是否有比输入字段更大z-index的值。