Html 内容与flexbox标题重叠-如何避免

我的菜单栏的CSS样式

* {
    margin: 0;
    padding: 0;
}
body {
    background: white;
    font-family: 'Helvetica Neue', Helvetica;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1.6rem;
    color: white;
    font-size: 1.2em;
}
header {
    position: fixed;
    background: #d777ea; /*light purple*/
    width: 100%;
    display: block;
}
header > nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    list-style: none;
    flex-wrap: wrap;
}
header > nav > ul > li {
    margin: 0;
    flex: 0 1 auto;
    position: relative;
    transition: 0.2s;
    cursor: pointer;
}
header > nav > ul > li:hover {
    background: #aa64e0; /*dark purple*/
}
header > nav > ul > li > ul {
    /* dropdown */
    position: absolute;
    background: #76a1e8; /*light blue*/
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li:hover > ul {
    /* dropdown */

    display: block;
    width: 220px;

}
header > nav > ul > li > a {
    color: white;
    display: flex;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 1rem 1.5rem;
    letter-spacing: 1px;

}
header > nav > ul > li > ul > li {
    display: block;
}
header > nav > ul > li > ul > li > a {
    text-decoration: none;
    color: white;
    display: flex;
    letter-spacing: 1px;
    cursor: pointer;
    padding: .25rem 1.5rem;
}
header > nav > ul > li > ul > li:hover {
    background: blue;
}
header > nav > ul > li > a > i {
    margin-left: 5px;
}
input {
    padding: .25rem;
    width: 100px;
}
input:invalid {
    border: 2px solid red;
}
header > nav > ul > li > ul > li > input:invalid + button {
    background: red;
    cursor: not-allowed;

}
button {
    padding: .25rem;
}

HTML标题和图像

<header>
    <nav>
      <ul>
        <li><a href="#">Teams<i class="fas fa-caret-down"></i></a>
            <ul>
                <li><a class="preset-id" data-schoolid=13318>Huron</a> </li>
                <li><a class="preset-id" data-schoolid=99999>Pioneer</a></li>
                <li>
                    <input type="number" min="1" max="100000" class="custom-id-value" placeholder="School ID #" required>
                    <button class="custom-id"> Go </button>
                </a>
                </li>
            </ul>
        </li>
        <li><a class="show-calendar">Calendar</a></li>

        <li><a class="show-athletes">Athletes</a></li>
    </ul>
    </nav>
</header>
<main>
    <image src="https://www.w3schools.com/w3css/img_lights.jpg"></image>
</main>

您只需在
main
标记中添加页眉高度的页边距顶部。同时将顶部：0添加到标题：

header{
  top:0;
  position: fixed;
  background: #d777ea; /*light purple*/
  width: 100%;
  display: block;
}

main{
   margin-top: 57px;
}

您如何知道边距高度？元素总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边框+底部边框这是什么计算方法？高度=25px（取决于内容）+16px+16px+0+0+0。要检查rem测量的计算方法，请检查此回答