Question

我尝试position: fixed;页面顶部的导航栏（没有滚动），但下面的第一个div重叠（请参阅http://jsfiddle.net/sexyzane/c0wop7vn/：您不能看第一行内容。）

我知道＆＃34;经典＆＃34;解决方案，但我既不能强制元素的高度，也不能使用基于像素的边距（或填充）。 Javascript不是一个选项（我需要纯CSS或HTML）。

我无法相信是如此难以言喻＆＃34;保持在最高位置，无论你的身高如何，其他一切都应该遵循以下内容＆＃34; ......

Answer 1

是否可以复制固定标头并使用不同的css类？如果是这样，你可以创建一个隐藏的div的副本，但仍占用固定的div后面的空间。在滚动时它可能看起来很奇怪，但我不确定你还有很多其他选择。

<div class="fixed-header">I'm fixed at the top!</div>
<div class="header-hidden">I'm fixed at the top!</div>
<div class="main-content">
    text row 1 text row 1 text row 1 text row 1 text row 1 text row 1
    <br>text row 2text row 2text row 2text row 2text row 2text row 2text row 2text row 2
    <br>text row 3text row 3text row 3text row 3text row 3text row 3text row 3text row 3
</div>

使用此css（请注意新课程中的position: relative和visibility:hidden）：

.fixed-header {
    position: fixed;
    top: 0px;
    background-color: green;
    border-style: solid;
    border-width: medium;
    border-color: fuchsia;
    width: 100%;
}
.header-hidden {
    position: relative;
    top: 0px;
    background-color: green;
    border-style: solid;
    border-width: medium;
    border-color: fuchsia;
    width: 100%;
    visibility: hidden;
}
main-content {
    background-color: fuchsia;
    border-style: solid;
    border-width: medium;
    border-color: green;
}

固定导航div（无高度），没有重叠

1 个答案: