Javascript 切换时，div由另一个div推动

我这里有两个导航栏。当我点击菜单btn时，侧边栏将滑入。但不知何故，侧边栏向下推菜单栏，我不明白为什么。如何使边栏停止推菜单栏。任何提示都将不胜感激

函数main（）{
$（“.menu bar”）.hide（）；
$（“.menu bar”）.fadeIn（300）；
$（“.sidebar”）.hide（）；
$（“.dropdown content”）.hide（）；
$（“.menu btn”）。在（'click'，function（）上{
$（“.sidebar”）.animate（{width:'toggle'}）；
});
$（“.close btn”）。在（'单击'，函数（）上{
$（“.sidebar”）.animate（{width:'toggle'}）；
});
$（“.login”）。在（'click'，function（）上{
$（“.dropdown content”）.animate（{width:'toggle'}）；
});
}
$（文档）.ready（主）

。侧栏{
显示：无；
宽度：250px；
背景色：#005777；
z指数：1；
填充顶部：60px；
身高：100%；
溢出：隐藏；
}
.品牌{
字体系列：ParmaPetit；
字体大小：50px；
}
.sidebar a、.login{
文字装饰：无；
填充：8px 8px 8px 8px；
显示：块；
字体大小：30px；
文本对齐：居中；
颜色：白色；
}
.关闭btn{
位置：相对位置；
字体大小：40px；
浮动：对；
底部：50px；
右：10px；
颜色：白色；
}
.侧栏a:悬停，.登录：悬停，.关闭btn:悬停，.菜单btn:悬停{
颜色：#01af55；
光标：指针；
过渡：0.3s；
}
.下拉内容{
背景色：#111111；
位置：相对位置；
左：250px；
底部：29px；
}
.菜单栏{
背景色：#005777；
垫底：10px；
溢出：隐藏；
浮动：顶部；
}
.菜单btn{
字体大小：40px；
光标：指针；
颜色：白色；
位置：相对位置；
左：20px；

&时代；
登录&x27A4；
☰

在侧边栏类中添加一个

位置：绝对；

就可以了

函数main（）{
$（“.menu bar”）.hide（）；
$（“.menu bar”）.fadeIn（300）；
$（“.sidebar”）.hide（）；
$（“.dropdown content”）.hide（）；
$（“.menu btn”）。在（'click'，function（）上{
$（“#折叠”）.hide（）；
$（“.sidebar”）.animate（{width:'toggle'}）；
});
$（“.close btn”）。在（'单击'，函数（）上{
$（“#折叠”）.show（）；
$（“.sidebar”）.animate（{width:'toggle'}）；
});
$（“.login”）。在（'click'，function（）上{
$（“.dropdown content”）.animate（{width:'toggle'}）；
});
}
$（文档）.ready（主）

。侧栏{
显示：无；
宽度：250px；
背景色：#005777；
z指数：1；
填充顶部：60px；
身高：100%；
溢出：隐藏；
}
.品牌{
字体系列：ParmaPetit；
字体大小：50px；
}
.sidebar a、.login{
文字装饰：无；
填充：8px 8px 8px 8px；
显示：块；
字体大小：30px；
文本对齐：居中；
颜色：白色；
}
.关闭btn{
位置：相对位置；
字体大小：40px；
浮动：对；
底部：50px；
右：10px；
颜色：白色；
}
.侧栏a:悬停，.登录：悬停，.关闭btn:悬停，.菜单btn:悬停{
颜色：#01af55；
光标：指针；
过渡：0.3s；
}
.下拉内容{
背景色：#111111；
位置：相对位置；
左：250px；
底部：29px；
}
.菜单栏{
背景色：#005777；
垫底：10px；
溢出：隐藏；
浮动：顶部；
}
.菜单btn{
字体大小：40px；
光标：指针；
颜色：白色；
位置：相对位置；
左：20px；

&时代；
登录&x27A4；
☰

在HTML中，您将侧边栏放在菜单之前，因此当您显示它时，它会将菜单向下推。页面正按照您告诉它的方式进行操作。如果您希望侧边栏在页面/菜单上滑动，您应该给它

位置：绝对的

。我怀疑完全隐藏它是否是理想的结果。