Html 为什么我的文本不显示在导航栏后？

我对整个HTML/CSS都很陌生。在查阅了一些教程后，我设法制作了一个基本的导航栏，但现在的问题是，我输入的任何文本都不会显示在导航栏下。我错过什么了吗

HTML:

正文{
保证金：0；
}
导航{
位置：固定；
排名：0；
宽度：100%；
背景色：#f2bbac；
浮动：对；
高度：70像素；
字体系列：“流沙”，无衬线；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
}
导航a{
文字装饰：无；
字体大小：20px；
颜色：白色；
文本转换：大写；
}
导航a：悬停{
颜色：灰色；
}
李海军{
显示：内联块；
左边距：40px；
填充：20px；
}

书





你好。测试

不要对导航使用浮点属性。用它来代替ul

试试这个代码

body{
    margin:0;
    padding:0;
}

nav{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background-color:#f2bbac ;
    height:70px;
    font-family: 'Quicksand', sans-serif;
}
nav ul{
   list-style: none;
   float: right;
}
nav a{
    text-decoration: none;
    font-size: 20px;  
    color: white;
    padding: 10px 10px;
    display : block;
    text-transform: uppercase;
}

---

这是由于

位置：固定导航的属性。它使基础内容从顶部开始。您必须为
h1
提供一些顶部偏移量。我刚刚在
h1


正文{
保证金：0；
}
导航{
位置：固定；
排名：0；
宽度：100%；
背景色：#f2bbac；
浮动：对；
高度：70像素；
字体系列：“流沙”，无衬线；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
}
导航a{
文字装饰：无；
字体大小：20px；
颜色：白色；
文本转换：大写；
}
导航a：悬停{
颜色：灰色；
}
李海军{
显示：内联块；
左边距：40px；
填充：20px；
}

书





你好。测试
应用位置：固定到某个元素会将其从网页上的元素流中移除，因此您的页眉位于页面的顶部，忽略导航栏

您所需要做的就是在导航条之后的第一个元素上应用上边距，以将其放置在下面。最好将html的其余部分放在一个content div中，并将margintop:70px应用于该div

<div id="content">
  <h1>hello there. testing</h1>
</div>


#content {
  margin-top: 70px; /* at least the height of you nav bar */
}


你好。测试
#内容{
边距顶部：70px；/*至少等于导航条的高度*/
}

基本上，您所面临的问题是由于在
标记上有
位置：fixed
引起的，此属性将使浏览器从渲染流中删除导航，并将其视为不存在导航，因此要在导航出现后添加内容，您所能做的就是使用
padding:70px
左右按下所有元素，工作代码段：


正文{
保证金：0；
填充顶部：70px；
}
导航{
位置：固定；
排名：0；
宽度：100%；
背景色：#f2bbac；
浮动：对；
高度：70像素；
字体系列：“流沙”，无衬线；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
}
导航a{
文字装饰：无；
字体大小：20px；
颜色：白色；
文本转换：大写；
}
导航a：悬停{
颜色：灰色；
}
李海军{
显示：内联块；
左边距：40px；
填充：20px；
}

书





你好。测试
顶部偏移是什么意思？这就像确保h1标签位于导航栏下方一样吗？我明白了，谢谢！我不知道使用位置：修复了。我最初使用它的目的是为了去除像我的Nav.BARGORY上面的白色空间那样的帮助，如果你觉得它有用的话，请考虑任何答案：