Bootstrapped webpage has input disabled due to position:relative - html

Question

hello I one simple but annoying problem. I managed to use css and bootsatrap to create the responsive webpage that i wanted. However, when i used position:relative my input (text field) got disabled. Any idea why?
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}

Answer 1

This is because of z-index: -1;. Its set to negative value.
Just make it positive like:
.login-form {
z-index: 1;
}
Or look at the snippet below:
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
Hope this helps!