隐藏在标题菜单后面的页面内容。我如何解决它？答案

【问题标题】：Page content hiding behind the header menu. How do i fix it?隐藏在标题菜单后面的页面内容。我如何解决它？
【发布时间】：2021-02-03 14:28:55
【问题描述】：

我正在尝试在我的网站上使用以下标题菜单模板。不幸的是，菜单隐藏了我页面内容的顶部。我是新手。请帮忙。我试过了，删除 z-index，添加底部边距，注意工作。

header.php 代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
      <a href="" class="logo">
      <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
          class="logoimage"/></a>
      <input class="menu-btn" type="checkbox" id="menu-btn" />
      <label class="menu-icon" for="menu-btn">
        <span class="navicon"></span>
      </label>
      <ul class="menu">
        <li class="contactme"><a href="#work">Contact Me</a></li>
        <li class="aboutme"><a href="#about">About Me</a></li>
        <li class="projects"><a href="#careers">Projects</a></li>
        <li class="Home"><a href="#contact" class="Home">Home</a></li>
      </ul>
    </header>
<!-- partial -->

<style>
body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #fffceb;
  }
  
  a {
    color: #000;
  }
  
  /* header */
  
  .header {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  
  .header li a {
    display: block;
    padding: 20px 20px;
    text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
   background: rgb(255, 245, 246);
   color: rgb(247, 133, 152);
  }
  
  .header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
  }
  
  /* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  .logoimage{
      width: 130px;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      float: right;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }
    .Home{
        order: 1;
    }
    .projects{
        order: 2;
    }
    .aboutme{
        order: 3;
    }
    .contactme{
        order: 4;
    }
  }

  @media only screen and (max-width: 600px) {
.menu{
    display: flex;
    flex-direction: column-reverse;
}
  }
</style>  
</body>
</html>

然后我有一个 index.php，其中包含此标头。我的index.php相关的样式是

body {
  background-color: #f2f2f2;
}

.formular input:disabled {
  background-color: #dddddd;
}

.hint {
  color: grey;
}

.title {
  font-weight: bold;
}

p.subtitle {
  font-weight: bold;
}

.requiredSymbol {
  color: red;
}

.formular input[readonly="readonly"] {
  background-color: #dddddd;
}

form.formular,
.validationEngineContainer {
  /*background-color: #FFFFFF;*/
  font-family: tahoma, verdana, "sans-serif";
  font-size: 12px;
  padding: 20px;
  border: 1px solid #a5a8b8;
  width: 700px;
  margin: 0 auto;
}
.formular fieldset {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #b5b8c8;
  border-radius: 5px;
}

【问题讨论】：

如果你真的将一个完整的 HTML 文档（带有打开和关闭 <html>,<head>,<body> 标签）嵌套在另一个 html 文档中，你将会遇到一些格式问题，我presume 还有那些在 HTML 文件中只能使用一次的 HTML 标签。
对于 CSS，优先级（声明规则的顺序）很重要。 Stack Overflow 用户很难在不了解索引和标题文档如何成为一个 HTML 文档的情况下帮助您解决此问题。
能否edit 向我们展示当头文件包含在索引文件中时您的页面标记实际上是什么样的？
嗨@tshimkus 非常感谢您的帮助。我接受了您的建议，并从 header.php 中删除了打开和关闭、、标记。上传到服务器并像魅力一样工作。我知道这并不完美，但符合我的目的。

标签： php html css

【解决方案1】：

您的标题 css 应该有一个位置：相对。你可以添加一些边距来增加与身体中任何东西的距离。示例如下：

.header {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
    position: relative;
    width: 100%;
    z-index: 3;
    margin-bottom: 10px;
}

【讨论】：