Bootstrap 5导航栏下拉按钮折叠显示异常问题求助

在使用Bootstrap 5导航栏时，添加的下拉按钮点击展开菜单后，菜单被body元素遮挡无法正常显示，代码如下，附问题截图：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navbar"> <!--this wrap all the navbar-->
    <div class="container-fluid"> <!--this class provides a responsive fixed width container-->

        <!-- this code is to add symbols  using bootstrap icon library  -->
        <a class="navbar-brand" href="#">
            
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclude" viewBox="0 0 16 16">
            <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm12 2H5a1 1 0 0 0-1 1v7h7a1 1 0 0 0 1-1V4z"/>
            </svg> 
            <!-- end symbol  -->
            VRQ: Vincenzo's Random "Quotes"</a>
        
        
        <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown button
                </button>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                  <li><a class="dropdown-item active" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>

          
            <div> <!--div container of all the buttons-->
                <button class="btn btn-secondary " type="button" style="width:150px" id="btncontactme">Contact Me</button>
                <button class="btn btn-secondary " type="button" id="btnsignup">Sign Up </button>
                <button class="btn btn-secondary " type="button" id="btnlogin">Log In</button>   
            </div>
    </div>
</nav>
 
<!-- END NAVBAR -->

这个问题核心原因通常是导航栏容器设置了overflow: hidden导致下拉菜单被裁剪，或者导航栏的z-index层级不足被其他元素覆盖，以下是具体修复步骤：

1. 移除导航栏的overflow: hidden样式
   检查#navbar或其父容器是否有自定义的overflow: hidden，若存在则修改为overflow: visible，确保下拉菜单能超出导航栏范围显示：

   #navbar {
     overflow: visible !important;
   }
   

2. 提升导航栏的z-index层级
   给导航栏设置更高的z-index，确保下拉菜单能覆盖在body及其他元素之上：

   #navbar {
     z-index: 1050;
   }
   

   （Bootstrap默认模态框z-index为1055，设置1050既不会覆盖模态框，也足够高于普通页面元素）

3. 确保导航栏定位属性正确
   Bootstrap 5导航栏默认是position: relative，这是下拉菜单绝对定位的基础，若导航栏被修改为其他定位属性（如static），需恢复为：

   #navbar {
     position: relative !important;
   }
   

如果以上方法无效，可检查body元素是否有设置overflow或z-index，但绝大多数情况都是导航栏自身的overflow或定位问题导致的。

内容的提问来源于stack exchange，提问作者Vincenzo Chiovaro