html - 为什么我的 div 覆盖和重叠

Question

我正在尝试为我的网站创建标题和左侧导航框。我对两者都有以下样式代码，但由于某种原因，我遇到了两个问题。 1) 导航框与我的标题略有重叠 2) 我的标题覆盖了网站上的文本。下面是代码:

#nav {
border-radius: 5px;
position: fixed;
display: inline;
margin-top: 50px;
background-color: white;
color: black;
margin-bottom: 10px;
padding: 5px;
}

#fixedheader{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: #FFFFFF;
background: #000000;
padding: 3px;
display: inline-block;
margin-bottom: 2px;
}

Answer 1

我没有 HTML，所以我做的很快。

1st 你必须给标题一个固定的高度，在这种情况下我做了 50px 然后如果你想在顶部和底部填充你必须在你的导航栏的边距顶部计算它在这种情况下我做了顶部填充和底部 0px 和 3px 仅在左侧和右侧

第二，因为你的导航是固定的，如果你想要你的 margin-bottom:2px，我现在把它从顶部固定了 50px；和 padding 3px 你必须把 top:58px;就在你的固定标题下

body{
  margin:0px;
}
#nav {
border-radius: 5px;
position: fixed;
display: inline;
top: 50px;
background-color:pink;/* white;*/
color: black;
margin-bottom: 10px;
padding: 5px;
}

#fixedheader{
  height:50px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: #FFFFFF;
background:red; /* #000000;*/
padding: 0px 3px;
display: block;
/*margin-bottom: 2px;*/
}

<div id="fixedheader">
    <p>the fixed header 50px height  the fixed header 50px height</p>
                                                    
</div>
<div id="nav">
                    <p> your nav</p>
                     <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p> <p> your nav</p>
               </div>