下拉菜单隐藏在我的英雄 img 后面
dropdown menu is hidden behind my hero img
我的主图有问题，它总是隐藏我的下拉菜单，即使我在菜单上放置了更高的 z-index。我为此找到了一个 "solution"，我给了主图 z-index:-1，但现在我在主图上的按钮不起作用。我想在没有任何解决方法的情况下完成这项工作。
这里是 jsfiddle（这里的下拉菜单有效，因为#hero-img 的 z-index:-1，但顶部按钮不起作用）
https://jsfiddle.net/xLo7wcph/1/
1) 请帮我找到 z-index > 0 不起作用的原因 + 解决方案，不使用 z-index:0;
2) 奖励问题，为什么当我将 hero img 设置为负 z-index 时按钮不起作用，即使我有 btn z-index : 1;
<nav id="navbar" class="flex">
<div class="flex-1 "><img src="images/drevo2.svg"></div>
<div class="flex-2 "><a href="index.html">falco's woodwork.</a></div>
<div class="flex-3 flex-element push">
<a href="index.html">domů</a>
</div>
<div class="flex-4 flex-element">
<a href="#categories">nabídka</a>
<div class="dropdown">
<a href="#categories"><p>motýlci</p></a>
<a href="#categories"><p>dekorace</p></a>
<a href="#categories"><p>ostatní</p></a>
</div>
</div>
<div class="flex-5 flex-element">
<a href="#contact">kontakt</a>
</div>
<div class="flex-6 flex-element">
<a href="https://www.seznam.cz/">nákup</a>
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><a href="#about-us"><img src="images/SIPKA DOLU.svg"></a></button>
</div>
#navbar{
border-bottom:solid 1px black;
.dropdown{
position:absolute;
z-index: 3;
display:none;
border-top:none;
padding:1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left:-1.8rem;
top:3.7rem;
p{
color:white;
&:hover{
border-bottom: 1px solid white;
}
}
}
.flex-element:hover .dropdown{
display:block;
z-index: 2;
}
}
#hero-img{
position: relative;
background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;
height: calc(100vh - 3.8rem);/* - vyska nav baru*/
background-size: cover;
z-index: -1;
}
从 #hero-img 中删除 z-index: -1; 并添加这些行可以解决您的问题。
#navbar{
position: relative;
z-index: 1;
}
最初发生的事情是，#hero-img 上的 position: relative 隐藏了您的下拉菜单。因为按位置 #hero-img 高于 #navbar。这就是为什么您还应该在 #navbar.
中添加 z-index
并且您给出了负值 z-index 以显示下拉列表。当你给一个元素负数 z-index 时，它将在其他元素下呈现。
在这种情况下，#hero-img 在正文下方。当您提供高 z-index 值时，该按钮将不会显示，因为它的父级 #hero-img 在顶层之下。
工作演示：
btn,
.btn:link,
.btn:visited {
background-color: rgba(255, 255, 255, 0);
border-style: none;
animation: btnFadeIn .5s ease-in forwards;
outline: none;
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 3; }
.btn:hover {
cursor: pointer; }
#navbar {
border-bottom: solid 1px black; }
#navbar .dropdown {
position: absolute;
z-index: 3;
display: none;
border-top: none;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left: -1.8rem;
top: 3.7rem; }
#navbar .dropdown p {
color: white; }
#navbar .dropdown p:hover {
border-bottom: 1px solid white; }
#navbar .flex-element:hover .dropdown {
display: block;
z-index: 2; }
#navbar .flex-1 {
width: 3rem;
height: 3rem;
margin-left: .5rem;
align-self: center;
padding: .3rem;
font-size: 2rem; }
#navbar .flex-2 {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem; }
#navbar .flex-2 a {
text-decoration: none;
color: black; }
#navbar .flex-element {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem;
transition: all .2s ease-out;
position: relative; }
#navbar .flex-element a {
text-decoration: none;
color: black; }
#navbar .flex-element:first-child {
margin-right: 0; }
#navbar .flex-element:hover {
transform: translateY(1.5px); }
#navbar .flex-element:active {
transform: translateY(-1.5px); }
@font-face {
font-family: 'Proxima Nova';
src: url("../proxima_ssv/Proxima Nova Thin.otf") format("opentype"); }
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
font-size: 62.5%;
scroll-behavior: smooth; }
body {
font-family: 'Proxima Nova', sans-serif;
line-height: 1.6;
color: black;
box-sizing: border-box; }
.push {
margin-left: auto; }
.line {
background-color: #C6C6C6;
border: solid .1rem #C6C6C6;
max-width: 960px; }
#navbar{
position: relative;
z-index: 1;
}
#hero-img {
position: relative;
/*background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;*/
background-color:darkgreen;
height: calc(100vh - 3.8rem);
/* - vyska nav baru*/
background-size: cover;
}
.text-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 40%);
backface-visibility: hidden;
text-transform: uppercase;
text-align: left; }
.text-box h1 {
line-height: 1; }
.text-box--main {
display: inline-block;
font-size: 4rem;
color: white;
animation: moveInLeft 1.5s ease-out; }
.text-box--sub {
display: inline-block;
color: white;
font-size: 6.5rem;
animation: moveInRight 1.5s ease-out; }
.flex {
display: flex;
flex-wrap: wrap; }
<nav id="navbar" class="flex">
<div class="flex-1 "></div>
<div class="flex-2 "><a href="index.html">falco's woodwork.</a></div>
<div class="flex-3 flex-element push">
<a href="index.html">domů</a>
</div>
<div class="flex-4 flex-element">
<a href="#categories">nabídka</a>
<div class="dropdown">
<a href="#categories"><p>motýlci</p></a>
<a href="#categories"><p>dekorace</p></a>
<a href="#categories"><p>ostatní</p></a>
</div>
</div>
<div class="flex-5 flex-element">
<a href="#contact">kontakt</a>
</div>
<div class="flex-6 flex-element">
<a href="https://www.seznam.cz/">nákup</a>
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><a href="#about-us">theButtonThatDoesntWork</a></button>
</div>
我的主图有问题，它总是隐藏我的下拉菜单，即使我在菜单上放置了更高的 z-index。我为此找到了一个 "solution"，我给了主图 z-index:-1，但现在我在主图上的按钮不起作用。我想在没有任何解决方法的情况下完成这项工作。
这里是 jsfiddle（这里的下拉菜单有效，因为#hero-img 的 z-index:-1，但顶部按钮不起作用）
https://jsfiddle.net/xLo7wcph/1/
1) 请帮我找到 z-index > 0 不起作用的原因 + 解决方案，不使用 z-index:0;
2) 奖励问题，为什么当我将 hero img 设置为负 z-index 时按钮不起作用，即使我有 btn z-index : 1;
<nav id="navbar" class="flex">
<div class="flex-1 "><img src="images/drevo2.svg"></div>
<div class="flex-2 "><a href="index.html">falco's woodwork.</a></div>
<div class="flex-3 flex-element push">
<a href="index.html">domů</a>
</div>
<div class="flex-4 flex-element">
<a href="#categories">nabídka</a>
<div class="dropdown">
<a href="#categories"><p>motýlci</p></a>
<a href="#categories"><p>dekorace</p></a>
<a href="#categories"><p>ostatní</p></a>
</div>
</div>
<div class="flex-5 flex-element">
<a href="#contact">kontakt</a>
</div>
<div class="flex-6 flex-element">
<a href="https://www.seznam.cz/">nákup</a>
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><a href="#about-us"><img src="images/SIPKA DOLU.svg"></a></button>
</div>
#navbar{
border-bottom:solid 1px black;
.dropdown{
position:absolute;
z-index: 3;
display:none;
border-top:none;
padding:1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left:-1.8rem;
top:3.7rem;
p{
color:white;
&:hover{
border-bottom: 1px solid white;
}
}
}
.flex-element:hover .dropdown{
display:block;
z-index: 2;
}
}
#hero-img{
position: relative;
background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;
height: calc(100vh - 3.8rem);/* - vyska nav baru*/
background-size: cover;
z-index: -1;
}
从 #hero-img 中删除 z-index: -1; 并添加这些行可以解决您的问题。
#navbar{
position: relative;
z-index: 1;
}
最初发生的事情是，#hero-img 上的 position: relative 隐藏了您的下拉菜单。因为按位置 #hero-img 高于 #navbar。这就是为什么您还应该在 #navbar.
z-index
并且您给出了负值 z-index 以显示下拉列表。当你给一个元素负数 z-index 时，它将在其他元素下呈现。
在这种情况下，#hero-img 在正文下方。当您提供高 z-index 值时，该按钮将不会显示，因为它的父级 #hero-img 在顶层之下。
工作演示：
btn,
.btn:link,
.btn:visited {
background-color: rgba(255, 255, 255, 0);
border-style: none;
animation: btnFadeIn .5s ease-in forwards;
outline: none;
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 3; }
.btn:hover {
cursor: pointer; }
#navbar {
border-bottom: solid 1px black; }
#navbar .dropdown {
position: absolute;
z-index: 3;
display: none;
border-top: none;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left: -1.8rem;
top: 3.7rem; }
#navbar .dropdown p {
color: white; }
#navbar .dropdown p:hover {
border-bottom: 1px solid white; }
#navbar .flex-element:hover .dropdown {
display: block;
z-index: 2; }
#navbar .flex-1 {
width: 3rem;
height: 3rem;
margin-left: .5rem;
align-self: center;
padding: .3rem;
font-size: 2rem; }
#navbar .flex-2 {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem; }
#navbar .flex-2 a {
text-decoration: none;
color: black; }
#navbar .flex-element {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem;
transition: all .2s ease-out;
position: relative; }
#navbar .flex-element a {
text-decoration: none;
color: black; }
#navbar .flex-element:first-child {
margin-right: 0; }
#navbar .flex-element:hover {
transform: translateY(1.5px); }
#navbar .flex-element:active {
transform: translateY(-1.5px); }
@font-face {
font-family: 'Proxima Nova';
src: url("../proxima_ssv/Proxima Nova Thin.otf") format("opentype"); }
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
font-size: 62.5%;
scroll-behavior: smooth; }
body {
font-family: 'Proxima Nova', sans-serif;
line-height: 1.6;
color: black;
box-sizing: border-box; }
.push {
margin-left: auto; }
.line {
background-color: #C6C6C6;
border: solid .1rem #C6C6C6;
max-width: 960px; }
#navbar{
position: relative;
z-index: 1;
}
#hero-img {
position: relative;
/*background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;*/
background-color:darkgreen;
height: calc(100vh - 3.8rem);
/* - vyska nav baru*/
background-size: cover;
}
.text-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 40%);
backface-visibility: hidden;
text-transform: uppercase;
text-align: left; }
.text-box h1 {
line-height: 1; }
.text-box--main {
display: inline-block;
font-size: 4rem;
color: white;
animation: moveInLeft 1.5s ease-out; }
.text-box--sub {
display: inline-block;
color: white;
font-size: 6.5rem;
animation: moveInRight 1.5s ease-out; }
.flex {
display: flex;
flex-wrap: wrap; }
<nav id="navbar" class="flex">
<div class="flex-1 "></div>
<div class="flex-2 "><a href="index.html">falco's woodwork.</a></div>
<div class="flex-3 flex-element push">
<a href="index.html">domů</a>
</div>
<div class="flex-4 flex-element">
<a href="#categories">nabídka</a>
<div class="dropdown">
<a href="#categories"><p>motýlci</p></a>
<a href="#categories"><p>dekorace</p></a>
<a href="#categories"><p>ostatní</p></a>
</div>
</div>
<div class="flex-5 flex-element">
<a href="#contact">kontakt</a>
</div>
<div class="flex-6 flex-element">
<a href="https://www.seznam.cz/">nákup</a>
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><a href="#about-us">theButtonThatDoesntWork</a></button>
</div>