html - 输入不会让我输入任何内容

Question

我有一个在 divabsolute-positioned下的fixeddiv。然后我尝试插入一个带有 an 的表单<input>，它不会让我输入任何内容。

#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

我相信至少您的部分问题是中心标签已被贬值。使用属性为“align:center;”的样式表 并将其应用于您的 DIV。

Answer 2

我认为你应该尝试：

#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

我不太确定你的 html 的其余部分是什么样子，但你确定它#navbar没有溢出你的#main_indexdiv。尝试添加用于测试目的：

height:100px;
overflow:hidden;

在你的#navbarcss 风格上，看看会发生什么。