如何让div与图像消失在菜单项后面？

时间：2016-11-27 05:42:35

标签： javascript jquery html css

我有一个带div的网页，这个div包含一个图像。我还有一个菜单栏，当盘旋时会扩展。然后，图像应位于菜单栏下方，当展开的菜单位于“上方”时，图像不可见。但是，它没有这样做：图像清晰地位于菜单的顶部。我怎么能解决这个问题并让图像消失？我在CSS中做错了吗？

body {
  padding-right: 0;
  margin-right: 0;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}
.nav {
  background-color: #F6F8FB;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 80px;
  /*overflow: hidden;*/
}
.nav li {
  float: left;
  padding: 1%;
  font-family: AlegreyaSansSC-Light;
  font-size: 14px;
  color: #637F92;
  letter-spacing: 0.52px;
  height: 100%;
  width: 126px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.nav li:hover {
  /*background-color: #0B619B;*/
  /*opacity: 0.1;*/
  /*color: #637F92;*/
  background: rgb(221, 232, 241);
  /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}
.nav ul {
  list-style: none;
  /*removes bullet points*/
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F8FB;
  min-width: 70px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  padding: 70px 126px;
  opacity: 1;
}
.dropdown-content:hover {
  background: rgb(221, 232, 241);
  /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}
.nav li:hover .dropdown-content {
  display: block;
}
.logo-bar {
  background-color: white;
  height: 180px;
  width: 100%;
}
.logo {
  height: 63px;
  width: 56px;
  position: relative;
  top: 25%;
  left: 15%;
  /*border: 3px solid #73AD21;*/
}
<div class="nav">
  <ul>
    <li>Wilkommen</li>
    <li>Angebot
      <ul class="dropdown-content">
        <li>Test</li>
        <li>Test</li>
      </ul>
    </li>
    <li>Unternehmen
      <ul class="dropdown-content">
        <li>Hallo</li>
        <li>Hallo2</li>
      </ul>
    </li>
    <li>Anfahrt</li>
    <li>Kontakt</li>
  </ul>
</div>

<!-- LOGO BAR -->
<div class="logo-bar">
  <div class="logo">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63 56" style="enable-background:new 0 0 63 56;" xml:space="preserve">
      <style type="text/css">
        .st0 {
          fill: #0D629C;
          stroke: #FFFFFF;
          stroke-width: 0.3177;
          stroke-miterlimit: 10;
        }
        .st1 {
          fill: #F2DE20;
        }
      </style>
      <g id="XMLID_3_">
        <path id="XMLID_13_" class="st0" d="M29.6,44.8c5,3.6,7.4,8.8,0.9,9.9c-8.8,1.5-20.3-2.7-26.1-9.5c-4.3-5,1.2-7.4,7.5-6.9
    					C18.3,38.8,24.6,41.2,29.6,44.8z" />

      </g>
    </svg>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

您可以尝试使用z-index将图像定位在菜单栏后面。 

image {z-index: -1;}

答案 1 :(得分：1)

有两件事是错误的：你的下拉菜单没有足够高的z-index坐在SVG之上，而你的.dropdown-menu代码的RGBA背景为95％不透明（含义）它有点透视）。

通过改变这两件事，我相信这就是你想要的效果。

＆＃13;
＆＃13; 
body {
  padding-right: 0;
  margin-right: 0;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}
.nav {
  background-color: #F6F8FB;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 80px;
  /*overflow: hidden;*/
}
svg {
  z-index: -1
}
.nav li {
  float: left;
  padding: 1%;
  font-family: AlegreyaSansSC-Light;
  font-size: 14px;
  color: #637F92;
  letter-spacing: 0.52px;
  height: 100%;
  width: 126px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.nav li:hover {
  /*background-color: #0B619B;*/
  /*opacity: 0.1;*/
  /*color: #637F92;*/
  background: rgb(221, 232, 241);
  /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}
.nav ul {
  list-style: none;
  /*removes bullet points*/
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F8FB;
  min-width: 70px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  padding: 70px 126px;
  opacity: 1;
  z-index: 100;
}
.dropdown-content:hover {
  background: rgb(221, 232, 241);
  /* Fallback for older browsers without RGBA-support */
  
}
.nav li:hover .dropdown-content {
  display: block;
}
.logo-bar {
  background-color: white;
  height: 180px;
  width: 100%;
}
.logo {
  height: 63px;
  width: 56px;
  position: relative;
  top: 25%;
  left: 15%;
  /*border: 3px solid #73AD21;*/
}
＆＃13; 
<div class="nav">
  <ul>
    <li>Wilkommen</li>
    <li>Angebot
      <ul class="dropdown-content">
        <li>Test</li>
        <li>Test</li>
      </ul>
    </li>
    <li>Unternehmen
      <ul class="dropdown-content">
        <li>Hallo</li>
        <li>Hallo2</li>
      </ul>
    </li>
    <li>Anfahrt</li>
    <li>Kontakt</li>
  </ul>
</div>

<!-- LOGO BAR -->
<div class="logo-bar">
  <div class="logo">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63 56" style="enable-background:new 0 0 63 56;" xml:space="preserve">
      <style type="text/css">
        .st0 {
          fill: #0D629C;
          stroke: #FFFFFF;
          stroke-width: 0.3177;
          stroke-miterlimit: 10;
        }
        .st1 {
          fill: #F2DE20;
        }
      </style>
      <g id="XMLID_3_">
        <path id="XMLID_13_" class="st0" d="M29.6,44.8c5,3.6,7.4,8.8,0.9,9.9c-8.8,1.5-20.3-2.7-26.1-9.5c-4.3-5,1.2-7.4,7.5-6.9
    					C18.3,38.8,24.6,41.2,29.6,44.8z" />

      </g>
    </svg>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题