Question

我在移动设备上的网站菜单遇到问题。单击移动菜单时，下方的图像会随菜单向下移动。无论如何我可以使用z-indexs向后推动图像并使移动菜单前进？

HTML：

    <header>
    <ul class="topnav">
        <li><a href="">Royal Navy</a></li>
        <li><a href="">Home</a></li>
        <li><a href="#news">About</a></li>
        <li><a href="#contact">The Equpiment</a></li>
        <li><a href="#about">Search</a></li>
        <div class="search">
            <input type="search" id="mySearch" value=""> 
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span> Search
            </button>
        </div>
        <li class="icon">
            <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
        </li>
     </ul>

     <div class="logo"><a href="">
         <img border="0" alt="Royal Navy" src="/Volumes/NATHANSUSB/Programming/HTML/Royal Navy Website 2/Images/Logo.png" width="100px" height="119px">
     </div>
</header>

<body>
    <div class="img1">
        <img alt="Made in the Royal Navy" src="/Volumes/NATHANSUSB/Programming/HTML/Royal Navy Website 2/Images/Made in the royal navy.jpg" width="100%" height="100%">
   </div>
</body>

CSS：

.body{
    background-color:#b5b5b5;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
}
.logo{
    margin: -50px 0 -20px 10px;
    position:absolute;
    z-index:100;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
    float: left;
    }

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #4169e1;}

ul.topnav li.icon {display: none;}

.search{
    margin: 14px 0px -20px 420px;
    position:absolute;
    z-index:100;
}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
    z-index:100;
  }

  .logo{
      display:none;
  }

  .search{
    display:none;
  }

  .img1{
    z-index:-1;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

Answer 1

正如其他人在评论中已经说过的那样，内容会被推下来，因为它与点击导航栏时切换的元素位于相同的级别。一个解决方案可能是让导航栏具有固定或绝对位置，并为主体提供一个填充顶部值，该值等于导航栏的高度，以便实际内容不会最终被它隐藏起来。

如何阻止我的移动菜单移动我的网站？

1 个答案: