如何让图像的div消失在菜单项后面？
问题描述：
我有一个div的网页，这个div包含一个图像。我也有一个菜单栏，它在盘旋时展开。图像应该位于菜单栏下方，并且在扩展菜单位于“上方”时不可见。但是，它并没有这样做：图像清晰地位于菜单的顶部。我怎么能解决这个问题，让图像消失？我在CSS中做错了什么？如何让图像的div消失在菜单项后面？
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
\t \t \t \t \t C18.3,38.8,24.6,41.2,29.6,44.8z" />
</g>
</svg>
</div>
</div>
答
有两件事情是错误的：你的下拉菜单中没有的z-index高到足以坐在SVG的顶部，你.dropdown-menu代码有一个RGBA背景，为95％不透明的（意思是有点透彻）。
通过改变这两件事，我相信这是你想要的效果。
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;*/
}<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
\t \t \t \t \t C18.3,38.8,24.6,41.2,29.6,44.8z" />
</g>
</svg>
</div>
</div>+1
谢谢，这工作！ –
答
您可以尝试使用z-index的菜单栏后面的图像位置。
image {z-index: -1;}
请提供一些代码（HTML，CSS等） –
我们需要必要的最低限度的信息，包括HTML，CSS和任何JavaScript你有属于这种情况的人才能给你一个具体的答案。我可以说的基本知识是，您需要将菜单的z-index更改为更高。 – Jhecht
我已经添加了文件 –