无法单击以关注/编辑浮动表单元素

Question

我正在使用Zurb Foundation's Grid来布置表单。当我浮动前几个文本并选择输入以将它们放在2列中时，我失去了单击它们来编辑它们的能力。请注意，我可以通过输入标签来编辑它们。

查看example demonstrating the problem。

可以点击浮动输入下方的文本区域进行聚焦和正常编辑。

当我从float: left;移除form#Form_Form div.field.text, form#Form_Form div.field.dropdown时，所有元素都可以正常编辑。

什么阻止浮动输入在被点击时获得焦点？

经过一番调查后，我发现了原因 - 希望以下答案可以帮助其他人解决同样的问题。

Answer 1

我所要做的就是将textarea浮起来。请参阅working sample。

form#Form_Form div.field.textarea {
    ...
    float: left;
    // clear: both;  // clearing also worked.
}

没有浮动的textarea的div是'覆盖'浮动输入，防止输入在用鼠标点击时获得焦点。因此another solution将改变'z-index'，以便textarea的div低于浮动输入。