html - 我在 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

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

通常当东西不是“可点击的”或“可聚焦的”时，会有某种元素“在它上面”。当您有负利润、绝对定位或其他时髦的东西时，通常会发生这种情况。

看这张图:

红色框是“冲突的”div，它会阻止文本框被点击。

如果是这种情况，最简单的方法就是右键单击文本框，然后转到“检查元素”或类似的(取决于浏览器)。如果您可以提供登录框的链接或 fiddle ，那就太棒了。

---

更新。 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 元素，因为它实际上没有做任何事情。