Html 将内容推到位置下方：固定顶部导航，使其'；可见

使用

位置：固定的
顶部导航栏时会出现此问题：由于导航栏不在文档流中，因此放置在导航栏后面的初始内容将被导航栏本身隐藏。这把小提琴显示了我的解决方案，它使用了一个额外的间隔div和
填充top
：


html
2个问题
有更好的解决办法吗
如果将
padding top
更改为
margin top
，导航条的行为就好像垫片位于其之前而不是之后一样。我想知道为什么会这样
为了澄清问题2，
页边距顶部
生成以下内容：


而
padding top
会产生这种（正确的行为）：


有更好的解决办法吗

因此，更好的解决方案是避免使用假间隔棒div
navspacketer
，而是使用
span
，因为使用
line height
且不使用假间隔棒div


CSS

.fixednav {
    width: 100%;
    height: 30px;
    background: #999;
    line-height:90px; /*this is the key here*/
}
.fixednav > span {
    position:fixed;
    display:block;
    width:100%;
    line-height:30px;/*this is the key here*/
}

HTML

<div class="fixednav"> 
    <span>some nav stuff</span>
    main content which should not be covered by nav
</div>


一些导航设备
nav不应涵盖的主要内容

问题2

如果将“padding top”更改为“margin top”，导航栏的行为就好像间隔符位于它之前而不是之后一样。我想知道为什么会这样

当您给出
填充顶部时：30px，它应用于内容区域的内部，使整个div高度（如果内容中有任何内容，则为30px+）

当你给出
页边距上限时：30px
，它应用于内容的外部，内容重叠为
固定的
位置div不遵循文档流，而是遵循视口流
 这里的问题是您固定了fixednav的位置，但没有固定导航间隔器。执行此操作时，fixednav和navspacer位于同一条线上，因为其中一条是固定的，而不是另一条。将填充添加到导航间隔器时，它会将fixednav从中推开。当您添加页边距顶部时：30px；它将固定导航和导航间隔一起移动。要解决此问题，请将固定位置添加到导航间隔器，并将内容添加到固定导航间隔器：

/*html*/    
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>

/*css*/ 
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; } 

/*html*/
一些导航设备
nav不应涵盖的主要内容
/*css*/
.fixednav{位置：固定；宽度：100%；高度：30px；背景：#999}
.navspacer{位置：固定；页边距顶部：30px；}

这将为您提供所需的正确行为。
以下是一个链接：

此外，这张图片应该有助于你处理填充和边距的问题。

希望这能有所帮助。
您可以像youtube一样使用div作为间距。
这里我举了一个例子，它使用javascript来监听窗口大小，并在必要时调整间隔。
但是你也可以在每个div中使用它


//初始调整
$（函数（）{$（'topSpacer'）.height（$（'fixedtop'）.height（）；}）；
//每次调整大小事件时的调整
$（窗口）。调整大小（函数（）{
$（'topSpacer'）.height（$（'fixedtop'）.height（））；
console.log（“+$（“#topSpacer”）.height（）+”；
});

有人给我打电话吗？
顶部导航栏元素第0000000000000页第11111111页第2222222页
另一个相关元素
是
位置：固定的
必须是
固定导航
类，还是您只需要一个类似的位置，其他属性也可供您使用？？？这是必须的。在任何情况下，即使向下滚动，顶部导航也需要“粘贴”到页面顶部，我想要一个纯CSS解决方案，因此我相信
位置：fixed
是实现这一点的唯一方法。事实上，我更喜欢这种解决方案，尽管我会将
直接放在
后面。谢谢。你知道我问的第二个问题的答案吗？我回答了第一个问题…更新第二个问题…请给我2分钟！！：）Gree，我很感谢您的回答，但这个解决方案有一个问题：您正在将页边空白顶部应用于页面上的第一个内容元素。但每个页面上的内容元素都不一样（想象一下一个站点范围的导航），所以这不是一个可行的解决方案。
<div class="fixednav"> 
    <span>some nav stuff</span>
    main content which should not be covered by nav
</div>

/*html*/    
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>

/*css*/ 
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }