html - 光标不会激活以允许在文本框中输入

Question

我正在使用 CSS 和 html5 来创建网站。我有一个包含 3 个文本框作为输入的表单。我用一个 div 标签围绕着表单，3 个文本框中的每一个都带有用于定位的 div 标签。定位文本框后，我无法在我的文本框中输入文本。怎么了？

Here is the HTML used:

<div id = "textboxsection">
<form method= "post" action= "pdonameinsert.php" >

<!--First name.-->
<div id = "firstnametextbox">
First Name: <input type="text" name ="firstname" placeholder = "First Name">
</div><br><br>

<!--Middle name.-->
<div id = "middlenametextbox">
Middle Initial: <input type="text" name ="middleinitial" placeholder = "Middle Initial"><br>
</div><br>

<!--Last name.-->
<div id = "lastnametextbox"></div>
Last Name: <input type="text" name = "lastname" placeholder = "Last Name"><br>
<br>

</div>

这是使用的CSS

#textboxsection
{
   position:relative;
   top:3px;
   left:160px;
}

此处的 CSS 代码用于每个文本框输入。定位不同。

#firstnametextbox
{
   position:relative;
   top:0px;
   left:5px;
   width:500px;
   height:10px;
}

Answer 1

这是一个功能示例:jsfiddle.net/cUv28/3

HTML:

<form id="textboxsection" method="post" action="pdonameinsert.php">
    <!--First name.-->
    First Name:
    <input id="firstnametextbox" type="text" name="firstname" placeholder="First Name">
    <!--Middle name.-->
    Middle Initial:
    <input id="middlenametextbox" type="text" name="middleinitial" placeholder="Middle Initial">
    <!--Last name.-->
    Last Name:
    <input id="lastnametextbox" type="text" name="lastname" placeholder="Last Name">
 </form>

CSS:

#textboxsection {
position:relative;
top:3px;
left:160px;
padding:10px;
background-color:#F00;
}
#firstnametextbox {
position:relative;
top:0px;
left:5px;
width:500px;
height:10px;
}