2

我有两个固定的标题，命名为 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

4 回答 4

2

如果要#LayoutDiv3在垂直下方#LayoutDiv1，则需要将#LayoutDiv3'top属性设置为 75px。如果您希望它以更高的深度出现，例如朝向查看屏幕的用户，则需要将其设置为高于z-index其他 div。

现在它实际上出现在 下方#LayoutDiv1，因为您将它们堆叠在一起并且#LayoutDiv1的 z-index 更高。

于 2013-09-15T03:43:25.100 回答
1

您已将第二个 Fixed Header 设为height: 30pxand z-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
}
于 2013-09-15T03:44:31.350 回答
1

你的header元素在那里。

检查这个小提琴

要解决这种情况，只需更改#LayoutDiv3的CSS规则，如下：

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

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

于 2013-09-15T03:45:55.157 回答
0

尝试添加：

#LayoutDiv1 {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
于 2014-09-18T20:39:50.890 回答