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

Question

我有一个隐藏的弹出菜单，切换它的可见性，点击一个按钮。当弹出菜单变得可见时，它会将主要内容替换到页面底部。这样做的目的是让弹出菜单显示在内容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属性进行操作以获得预期的效果。

Answer 1

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