Question

我在absolute-positioned div下有fixed这个div。然后我尝试在其中插入一个带有<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_index div。尝试添加以进行测试：

height:100px;
overflow:hidden;

以#navbar css样式显示会发生什么。

输入不会让我输入任何东西

3 个答案: