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’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.