Javascript 我希望我的导航栏在单击手机大小切换时与内容重叠

我希望我的导航栏在单击手机大小切换时与内容重叠。 展开导航栏时，我不希望内容向下滚动 下面是我的网站的html和css代码以及js脚本 如何编码

$（函数（）{
$（“.toggle”）。打开（“单击”，函数（）{
如果（$（“.item”）.hasClass（“活动”））{
$（“.item”）.removeClass（“活动”）；
$（this.find（“a”）.html（“”）；
}否则{
$（“.item”）.addClass（“活动”）；
$（this.find（“a”）.html（“”）；
}
});
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
#身体{
左边距：10%；
保证金权利：10%；
}
/*导航*/
导航{
填充底部：30px；
填充顶部：85px；
}
保险商实验室{
列表样式类型：无；
}
菜单{
左侧填充：0；
页边距底部：0；
}
李阿{
文字装饰：无；
颜色：#1d；
左：1rem；
}
李先生{
空白：nowrap；
}
.切换a{
字体大小：25px；
}
/*移动菜单*/
.菜单{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
对齐项目：居中；
}
.切换{
顺序：1；
}
.项目{
宽度：100%；
文本对齐：右对齐；
顺序：2；
显示：无；
}
.item.active{
显示：块；
}
/*桌子*/
@介质和全部（最小宽度：600px）{
.菜单{
证明内容：中心；
}
.标志{
弹性：1；
}
.切换{
弹性：1；
文本对齐：右对齐；
}
}
/*桌面*/
@介质和全部（最小宽度：900px）{
.项目{
显示：块；
宽度：自动；
}
.切换{
显示：无；
}
.标志{
顺序：0；
}
.项目{
顺序：1；
}
}










Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时

这是您的固定代码HTML

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <div id="body">
    <!--navbar-->
    <nav>
     <ul class="menu">
       <li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
       <li class="item"><a href="motion-graphics.html">Motion Graphics</a></li>
       <li class="item"><a href="advertising.html">Advertising</a></li>
       <li class="item"><a href="animation-banner.html">Animation banner</a></li>
       <li class="item"><a href="others.html">Others</a></li>
       <li class="item"><a href="about.html">About</a></li>
       <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
     </ul>
   </nav>

   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script src="script.js"></script>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
     when an 
    </p>
   </div>

请注意如何格式化代码。我修复了你的代码片段。不清楚您的预期输出是什么位置：绝对位置
    * {

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

#body {
  margin-left: 10%;
  margin-right: 10%;
}


/* nav */

nav {
  padding-top: 10px;
  position: relative;
  width: 100%;
  height: 150px;
}

ul {
  list-style-type: none;
}

ul.menu {
  padding-left: 0;
  margin-bottom: 0;
}

li a {
  text-decoration: none;
  color: #1D1D1D;
  padding-left: 1rem;
}

.menu li {
  white-space: nowrap;
}

.toggle a {
  font-size: 25px;
}


/* mobile menu*/

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 2;
}

.toggle {
  order: 1;
}

.item {
  width: 100%;
  text-align: right;
  order: 2;
  display: none;
}

.item.active {
  display: block;
}


/* table */

@media all and (min-width: 600px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
  .toggle {
    flex: 1;
    text-align: right;
  }
}


/* desktop */

@media all and (min-width: 900px) {
  .item {
    display: block;
    width: auto;
  }
  .toggle {
    display: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
  }
}