Html 字段集中的表单元素不可用

我在表单中使用了一些字段集。但当我想使用它们时，它们就像残疾人一样。您不能在文本框中单击，也不能在选择框中选择选项。这是我的密码：

HTML:

为了在这里演示它的效果，它是打开的。我基于以下内容构建了我的代码：

有人能告诉我我做错了什么吗？

从main中删除z-index css规则，它就会工作

---

谢谢你对我的帮助和+1的解释。我将接受这个答复。乐于帮助：接受了，但在特定时间之前没有让我：

<fieldset>
<legend>Group 1</legend>

<div><input type="text" /></div>
<div>

    <select>
        <option>Option 1</option>
    </select>
</div>
</fieldset>
<fieldset>
<legend>Group 1</legend>

<div><input type="text" /></div>
<div>

    <select>
        <option>Option 1</option>
    </select>
</div>
</fieldset>

#main {
    position: relative;
    border: 1px solid #c3c3c3;
    box-shadow:
        0 0 0 1px #d8d8d8;
    min-width: 300px;
    min-height: 500px;
    max-height: 500px;
    max-width: 300px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index:-1;
    margin-left: 40%;
    margin-right: 40%;
    padding-top: 70px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
FIELDSET {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;
    border-radius: 4px;
}
LEGEND{
    padding: 2px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:normal;
    line-height:1;
    color:#999;
}