移动视图上的下拉 div 下面的 div答案

【问题标题】：div underneath dropdown div on mobile view移动视图上的下拉 div 下面的 div
【发布时间】：2020-07-23 22:32:02
【问题描述】：

我正在开发一个适用于移动/桌面的响应式网站。在导航上工作，终于让它以我想要的方式显示。导航菜单在桌面模式下没有下拉菜单，所以没有问题。问题是，当进入移动视图时，汉堡菜单的下拉菜单不会越过下面的 div，而是将下面的 div 向下推。

这是我的示例 html：

    <!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>test menu</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato&amp;subset=latin,latin-ext">
        <link rel="stylesheet" type="text/css" href="css/bootstrap3.3.6.min.css">
    </head>  
<body>  
<br>
<div class="container example2">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><img src="images/logo.jpg" alt="Dispute Bills">
        </a>
      </div>
      <div id="navbar2" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>
<style>
  img.panorama {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    position: absolute;
    padding-top: 100px;
  } 
</style>
<img class="panorama" src="images/condo-panorama.jpg" alt="" width="1599" height="461">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>  
    </html>

这是css：

/**********************************
Responsive navbar-brand image CSS
- Remove navbar-brand padding for firefox bug workaround
- add 100% height and width auto ... similar to how bootstrap img-responsive class works
***********************************/

.navbar-brand {
  padding: 0px;
  height: 80px;
}
.navbar-brand>img {
  height: 100%;
  padding: 2px;
  width: auto;
}

/*************************
EXAMPLES 2-7 BELOW 
**************************/


/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand {
  height: 80px;
  background-color: #fff;
}

.example2 .navbar-brand>img {
  max-width: 120px;
  height: auto;
}

.example2 .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
}
.example2 .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}
.example2 .navbar-default {
    -webkit-box-shadow: 2px 7px 6px -2px rgba(0,0,0,0.34); 
    box-shadow: 2px 7px 6px -2px rgba(0,0,0,0.34);
    border-bottom: 2px solid rgba(221, 221, 221, 0.82);
    border-top: 3px solid #fff;
    text-transform: uppercase;
    color: #6d6d6d!important;
    background-color: #fff;
}
.example2 .navbar-default a {
    color: #6d6d6d!important;
    background-color: #fff;
}
.example2 .container-fluid {
  background-color: #fff;
}


.navbar-primary {
      box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(221, 221, 221, 0.82);
    border-top: 3px solid #3e476d;
      text-transform: uppercase;
    color: #6d6d6d!important;
}
.navbar-primary a {
    color: #6d6d6d!important;
}



/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
      -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 50px;
}
.navbar-alignit .navbar-brand {
    top: 2%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0,-50%);
    margin-right: 15px;
  margin-left: 15px;
}

.navbar-nav>li>.dropdown-menu {
    z-index: 9999;
}

body {
  font-family: "Lato";
}

我把这段代码从codeopen修改了

有人可以帮忙吗？

【问题讨论】：

标签： html css mobile dropdown

【解决方案1】：

可能有点晚了，但您的问题可以通过在品牌名称元素上设置 position:absolute` 来解决。这样，它就脱离了正常流程，并且不会打扰汉堡菜单。

.navbar-brand{
    position:absolute;  
}
/* This is needed to overlap the brand name */
.navbar-toggle.collapsed{
    z-index:1; 
    background-color:white; 
}

【讨论】：