Html 我在Div的表格不可读取

我有一个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>

客户端登录

---

我的网站（）

我还没有签出您的表单，但根据您的经验，我可以告诉您这一点

通常，当东西不“可点击”或“可聚焦”时，会有某种元素“在上面”。当你的利润率为负，绝对定位或是其他一些古怪的东西时，这种情况经常发生

请参见此图片：

红色框是“冲突”div，防止单击文本框

如果是这种情况，最简单的方法是右键单击文本框，然后转到“Inspect element”或类似位置（取决于浏览器）。如果您可以提供登录框的链接或提琴，那就太棒了

---

更新。行动现场

我上面描述的问题就是问题所在

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

<div class="art-shapes">

</div>

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

---

我的建议是删除

div.artshapes

-元素，因为它实际上什么都不做。

我在这里创建了一个工作JSFIDLE

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

如果看不到不起作用的实际页面或代码，就很难猜测问题出在哪里

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

---

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

z-index

值。

这就是我在回答中的意思；@Totally Tech ID的帖子中没有足够的信息来提供更详细的答案。我也做了一些修改。大家好，我刚刚添加了一个链接到我的站点（），除了整个标题部分之外，我看不到任何不可见的元素。我是对的！检查“输入”显示

div

，其中类

艺术图形

覆盖您的输入。在目前的状态下，它似乎没有多大作用。考虑去除它吗？完美！我不知道为什么会这样，我想如果我让标题可以点击，那么它就被使用了！我刚把它取下来！非常感谢。不客气！下一次，只需使用chrome的检查器进行检查；我花了5秒钟。

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