固定标题消失

时间:2013-09-15 03:35:48

标签: css html header z-index

我有两个固定的标题,名为div,一个在另一个之下。第二个消失了。以下CSS中有什么东西可以解释它的消失吗?

#LayoutDiv1 {
    position: fixed;
    height: 75px;
    top: 0;
    width: 100%;
    z-index: 10001;
    background:#FFF
}

#LayoutDiv3 {
    position: fixed;
    height: 30px;
    top: 0;
    width: 100%;
    z-index: 10000;
    background:#FFF
}

HTML

<div class="gridContainer clearfix">
<div id="LayoutDiv1">Hi</div>
<form action="website.php" method="POST">
<div id="LayoutDiv3">
    Name:
    <input type="text" name="user"/>
    Gender<FONT COLOR="#FF0000">*</FONT>
    <select name="Gender[]" double="double">
        <option value="Female">Female</option>
        <option value="Male">Male</option>
    </select>
</div>

4 个答案:

答案 0 :(得分:2)

如果您希望#LayoutDiv3垂直于#LayoutDiv1下方,则需要将#LayoutDiv3的{​​{1}}属性设置为75px。如果您希望它以更高的深度显示,例如向用户查看屏幕,则需要将其设置为比其他div更高的top

现在它实际上出现在z-index下面,因为你将它们叠加在一起,而#LayoutDiv1的z-index更高。

答案 1 :(得分:1)

您已将第二个固定标题设为height: 30pxz-index: 10000,这将使其隐藏在第一个标题后面。

如果您需要在第一个标题上方显示第二个标题,请创建z-index: 10002

如果您需要在第一个下面显示它,那么将顶部设置为至少第一个的高度,即top: 75px

修改

当你需要一个接一个的div时,这应该是你最后的方法,

#LayoutDiv1 {
    position: fixed;
    height: 75px;
    top: 0;
    width: 100%;
    z-index: 10001;
    background:#FFF
}

#LayoutDiv3 {
    position: fixed;
    height: 30px;
    top: 75px;
    width: 100%;
    z-index: 10001;
    background:#FFF
}

答案 2 :(得分:1)

您的header元素在那里。

选中 fiddle

要解决这种情况,只需更改#LayoutDiv3的CSS规则,如下所示:

#LayoutDiv3 {
   background: red;
   z-index: 10001;
}

将#LayoutDiv1的z-index属性更改为“10000”。

答案 3 :(得分:0)

尝试添加:

#LayoutDiv1 {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}