Can't Type in <input> tags

Question

I'm currently trying to create a form on my website's front page. However, Im having issues being able to type within the input boxes. In absolute positioning, the cursor doesn't show up. When I change the positioning from absolute to relative, I no longer have this issue. Unfortunately, when I do this, it moves all my other elements down. Is there a way around this so the tag doesn't move my other elements down, along with being able to type into this input boxes?

HTML:

<div id="wrapper">
    <div class="header">
        <div id="head_login">
            Login
            <div id="arrow-down"></div>
        </div>
    </div>
    <div id="head_break"></div>
    <div class="content_splash">
        <form>
        **<input type="text" id="firstname" /></form>**
        <div id="vertical_one"></div>
        <div id="vertical_two"></div>
        <p id="OR"> OR </p>
        <div id="facebook_login"><img src="{% static 'home/facebook_login.gif' %}" /></div>
    </div>
    <div id="content_break"></div>
    <div class="content_description">
    <h2> What is the Title? </h2>
    </div>
    <div id="content_description_break"></div>
    <div class="content_howitworks">
    <h2> How it Works.</h2>
    </div>
    <div id="footer_break"></div>
</div>

CSS:

content_splash{
    position: relative;
    margin-top: 30px;
    height: 500px;
    border: 1px solid black;
}
.content_splash input{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}
.content_splash #firstname{
    position: absolute;
    margin-top: 200px;
    width: 170px;
    height: 25px;
}
.content_splash #vertical_one{
    position: absolute;
    width: 1px; 
    height: 60px;
    margin-left: 310px;
    margin-top: 298px;
    background: black;
}
.content_splash #vertical_two{
    position: absolute;
    width: 1px; 
    height: 60px;
    margin-left: 310px;
    margin-top: 380px;
    background: black;
}
.content_splash #OR{
    position: absolute;
    padding-top: 346px;
    padding-left:300px;
    color: black;
}
.content_splash #facebook_login{
    position: absolute;
    padding-top: 350px;
    padding-left: 350px;

}
#content_break {
    margin-top: 20px;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#e2e3e4), to(#e2e3e4), color-stop(50%, black));  
}
.content_description{
    margin-top: 20px;
    height: 400px;
}
.content_description h2{
    font-size: 40px;
    font-family: Trebuchet MS;
    padding-left: 30px;
    color: #a2caf6;
}
#content_description_break {
    margin-top: 20px;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#e2e3e4), to(#e2e3e4), color-stop(50%, black));  
}
.content_howitworks{
    margin-top: 20px;
    height: 400px;
}
.content_howitworks h2{
    font-size: 40px;
    font-family: Trebuchet MS;
    padding-left: 30px;
    color: #a2caf6;
}

Answer 1

Add a z-index to the input.

.content_splash #firstname{
    position: absolute;
    margin-top: 200px;
    width: 170px;
    height: 25px;
    z-index: 1;
}

Example

EDIT

As by request of @gaitat, I will explain why this works.

Assume the following HTML:

<div class="parent">
    I am the parent.

    <div class="child red">I am the red child.</div>

    <div class="child blue">I am the blue child.</div>

    <div class="child green">I am the green child.</div>
</div>

Now, also assume the following css:

.parent
{
    position: relative;
}

.child
{
    position: absolute;
    padding: 5px;
}

.red
{
    background-color: red;
}

.blue
{
    background-color: blue;
}

.green
{
    background-color: green;
}

See the JSFiddle here

As you can see, in the DOM, the green child is the last child of parent, thus it's rendered last. The last rendered element, assuming an absolute position and no z-index is used, will be rendered on top.

Now, when we add a z-index to the red child:

.red
{
    background-color: red;
    z-index: 1;
}

You will see that the red child will be rendered on top, because his z-index is higher than the other children, who have a z-index of 0 (default). See the JSFiddle here showing this.

Do keep in mind that this only works with siblings sharing the same direct parent, otherwise it will not.