Input won't Let Me Input Anything - html

Question

I have this div that is absolute-positioned under a fixed div. I then tried to insert a form with an <input> in it, and it won't let me input anything.
#navbar {
width: 100%;
padding: 30px;
position: fixed;
background-color: #0066CC;
box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
}
#main_index {
left: 8%;
right: 8%;
width: 85%;
top: 300px;
z-index: -1;
min-height: 100px;
position: absolute;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
<div id="navbar"><center><b>NAVBAR</b></center></div>
<div id="main_index">
<div id="index_login">
<form action="login" method="post">
<input type="text" required="required" name="username">
<br />
<input type="password" required="required" name="password">
</form>
</div>
</div>

Answer 1

I believe at least part of your problem is the center tag has been depriciated. Use a style sheet with the attribute "align:center;" and apply it to your DIV.

Answer 2

I think you should try with:
#navbar {
width: 100%;
padding: 30px;
position: fixed;
z-index: 2;<----------------------bigger than #main_index
background-color: #0066CC;
box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
}
#main_index {
left: 8%;
right: 8%;
width: 85%;
top: 300px;
z-index: 1;<--------------------- positive
min-height: 100px;
position: absolute;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}

Answer 3

I'm not really sure how the rest of your html looks like but are you sure that the #navbar isn't overflowing over your #main_index div. Try adding for testing purposes:
height:100px;
overflow:hidden;
on your #navbar css style and see what happens.