标题栏中的哪个属性值导致页面其余内容被隐藏？

我制作了带有无JavaScript替代方案汉堡菜单的标题栏和导航栏，但代码中存在问题，导致在其下方添加文本、图片等内容时均无法显示。奇怪的是，设置body {background-color: red;}能生效，但由于是多页面网站，我无法以body作为参考。

现有代码 #

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*global styles */

/* Header styling */

header a {
  color: black;
}

.header {
  background-color: #ffe8d6;
  font-family: "cabin", 'serif';
  position: fixed;
  width: 100%;
  z-index: 3;
}

/*menu styling*/

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #ffe8d6;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #ffe8d6;
  text-decoration: none;
}

.header li a:hover,
.header .menu-button:hover {
  background-color: #c8b6ff;
}

.header .skillshare {
  display: block;
  float: left;
  font-size: 2rem;
  padding: 10px 20px;
  text-decoration: none;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .nav-icon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .nav-icon:before {
  top: 5px;
}

.header .menu-icon .nav-icon:after {
  top: -5px;
}

.header .menu-button {
  display: none;
}

.header .menu-button:checked~.menu {
  max-height: 240px;
}

.header .menu-button:checked~.menu-icon .nav-icon {
  background: transparent;
}

.header .menu-button:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
}

.header .menu-button:checked~.menu-icon .nav-icon:after {
  transform: rotate(45deg);
}

.header .menu-button:checked~.menu-icon:not(.steps) .nav-icon:before,
.header .menu-button:checked~.menu-icon:not(.steps) .nav-icon:after {
  top: 0;
}

@media (min-width: 48rem) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

HTML 代码 #

<body>
  <header class="header">
    <a href="index.html" class="skillshare">Skill Share</a>
    <input class="menu-button" type="checkbox" id="menu-button">
    <label class="menu-icon" for="menu-button">
    <span class="nav-icon"></span></label>
    <ul class="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="events.html">Events</a></li>
      <li><a href="contact.html">Contact</a>
    </ul>
  </header>
</body>

解决方案 #

问题核心是使用position: fixed的.header元素脱离了文档流，它不会在页面中占据空间，导致后续内容会被固定的头部完全遮挡。提供两种可行修复方案：

方案一：给内容容器添加顶部内边距 #

给页面的主内容容器（或直接给body，若多页面统一结构）添加等于头部高度的padding-top，让内容避开固定头部。从现有代码看，头部高度约为60px，示例代码如下：

/* 若用统一主容器 */
.main-content {
  padding-top: 60px;
}

/* 若直接给body（多页面可放在全局CSS中） */
body {
  padding-top: 60px;
}

方案二：给头部添加占位伪元素 #

通过伪元素模拟头部的高度，填补它脱离文档流后留下的空白，不影响其他元素布局：

.header::after {
  content: "";
  display: block;
  height: 60px; /* 与.header实际高度保持一致 */
  visibility: hidden;
}

额外修复：HTML结构错误 #

你的HTML中<li><a href="contact.html">Contact</a>未闭合，会导致结构异常，建议修正为：

<li><a href="contact.html">Contact</a></li>

内容的提问来源于stack exchange，提问作者CC_trooper