如何防止弹出菜单 div 取代其他内容 div？答案

【问题标题】：how do I prevent a popout menu div from displacing other content divs?如何防止弹出菜单 div 取代其他内容 div？
【发布时间】：2021-03-20 19:29:35
【问题描述】：

我有一个隐藏的弹出菜单，通过单击按钮来切换其可见性。当弹出菜单变得可见时，它会将主要内容移到页面底部。想法是让弹出菜单显示在内容 div 上。

HTML：

<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
    <div class = "menu_nav_inner align-center pad-2">
        <ul>
            <li><button class="static_nav_btn"><a href="#">THE MISSION</a></button></li>
            <li><button class="static_nav_btn"><a href="#">OUR WORK</a></button></li>
            <li><button class="static_nav_btn"><a href="#">WHO WE ARE</a></button></li>
            <li><button class="static_nav_btn"><a href="#">MISS ROSIE</a></button></li>
            <li><button class="static_nav_btn"><a href="#">SCHOLARSHIP</a></button></li>
            <li><button class="static_nav_btn"><a href="#">CONTACT</a></button></li>
        </ul>
        
        <div class="box">
          <a href="#" class="btn btn-white btn-animation-1">DONATE</a>
        </div>
    </div>
    
</div>


<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
    <div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</div>


<!------- Main body ------->
<main id="content" class="flex-grow">
    <div id="homepage-banner">
        <div class="page-banner">
            <h2 class="small-hidden">
                FOUNDATION
            </h2>
        </div>
    </div>
</main>

CSS： （弹出菜单）

.popout_navbar_align_center {
    background-image: url("Assets/Textures/sandpaper.png");
    background-color:;
    width: 240px;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    overflow-x: hidden;
}

.popout_navbar_align_center .menu_nav_inner {
    padding-top: 60px;
}

**JAVASCRIPT：**

$("#sideNavId").on("click", function() {

         
         
         if($(".popout_navbar_align_center").is(":visible"))
         {
             $(".popout_navbar_align_center").hide("slow");
         }
         else {
             $(".popout_navbar_align_center").show("slow");
         }
         
     });

我尝试为主要内容 div 操作 css，但我尝试的所有方法似乎都不适用于这种方法。我不确定应该操作哪些 div 属性以获得所需的效果。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以尝试使用top 和left css 值以及position: absolute 来实现您的弹出窗口不移动其余内容，而是浮动在它前面

【讨论】：