使用函数 z index 时如何使锚标记可点击
How can i make anchor tags clickable when using the function z index
导航被绝对设置为 header容器。在运动中它工作正常。
它需要从页面主要内容上方的 headerContainer 后面放下。这样内容就消失了，菜单在最上面。
我这样做是通过将我的主要 class 设置为 relative 和负数 z-index: 2;因为导航设置为负 -1;
现在一切正常，看起来不错。唯一的问题是我的导航栏中的锚标签不再可点击。
我一直在寻找答案，但找不到任何相关内容。
有谁能告诉我为什么会这样？我还没有找到好的解决方案。
我想要发生的事情看起来很简单.. 它需要从后面掉下来或者至少创造它来自 header..
后面的想法
我试过将导航的高度设置为 0，然后在单击时将其设置为 100%。那会放下菜单，就好像它来自后面一样。但给了我其他问题，比如锚会比实际导航背景晚或早出现。
这是包含完整示例的片段。
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
任何 children 的 z-index 直接继承自他们的 parent - 所以如果你有一个 child 里面的 z-index 是 100 parent 的 z-index 为 -1，child 相对于 -1 为 100。
您应该能够在不依赖 z-index 的情况下构建页眉和菜单。例如，我已经从您的代码中取出索引并将其放在一起（只需添加动画）：https://jsfiddle.net/efk6s1oj/
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
/* display: none; */
padding: 15px;
background: #ffffff;
transition: top 2s;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
nav {
position:absolute;
opacity:0;
}
nav.show {
top:100px;
opacity:1;
}
对于这种效果，由于您指出的问题，我使用了不同的技术来模拟掉落效果。
只需将 <nav> 放置在您想要的位置，并使用 max-height 从 0 到足够大的值，并删除所有负 z-index。
在下面的代码片段中找到解决方案
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: 9;
/* display: none; */
overflow: hidden;
padding: 0 15px;
width: calc(100% - 30px);
position: absolute;
/*top: -100px;
left: -1px;*/
top: 100%;
left: 0;
background: #ffffff;
/*transition: top 2s;*/
max-height: 0px;
transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav.show {
/*top: 100%;*/
max-height: 500px;
padding: 15px;
transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
/*z-index: -2;*/
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
避免使用 z-index 尤其是底片。您的链接无效，因为它们在 z-index.
的透明内容后面
改为更改元素在页面中的顺序，这样会更简单。
为了简单起见，我删除了您的 fonts/styles，并从动画 top 切换为动画 transform:
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
position: absolute;
top: 0;
left: 0;
}
.headerContainer,
.container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
nav {
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: 66px;
left: 0;
background: #ffffff;
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}
nav.show {
transform: translateY(0);
}
nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
}
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- First content, everything else appears on top -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- Then nav, on top of content, under header -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<!-- Finally header, on top of everything -->
<header>
<div class="headerContainer">
<div class="headerBrand">Whatever</div>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
</div>
</header>
最简单的解决方案是将 position: relative;z-index: 0; 添加到 body 元素。您的负 z-index 元素位于 body 元素的后面，这使它们无法点击。通过向主体添加 z-index，您可以强制创建堆叠上下文，并且您不会遇到此问题。
这里有完整的解释：
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
position: relative;
z-index: 0;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
您可能会争辩说元素不在主体后面，因为我们可以清楚地看到它们在背景的顶部，但这是由于 background propagation 将背景从主体移动到 html元素.
在您的初始代码中向 html 添加背景以禁用背景传播，您会注意到元素是如何在正文后面呈现的：
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html {
background:red;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
主要更改包括将导航元素更改为 div 元素，其中 class 作为 header 导航并进行相应的更改。
也 z-index 工作只是不要负推 header 最多 +ve 个数字不将导航推到 -ve 个数字后面。
这是最接近您问题的最佳解决方案。
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector(".headerNav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
align-content: center;
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
header{
width: 100%;
height: 7rem;
}
.headerContainer, .headerNav, .container{
display: flex;
width: 90%;
max-width: 1140px;
background: white;
margin: auto;
position: relative;
justify-content: space-between;
align-items: center;
padding:1rem;
}
.headerContainer{
height: 7rem;
z-index: 3;
}
.container{
padding:2rem;
}
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
.menuBtn {
width: 3rem;
height: 3rem;
text-align: center;
background: red;
font-size: 2rem;
line-height: 3rem;
border-radius: .5rem;
cursor: pointer;
color: #FFF;
}
.headerNav{
position: absolute;
top: -10rem;
transition: top .5s;
left:0;
right:0;
margin-left:auto;
margin-right: auto;
z-index: 2;
padding: 1rem;
}
.headerNav.show{
top: 7rem;
}
.mainMenu{
list-style: none;
}
.mainMenu li a:hover{
color: red;
}
<body>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
<!-- Nav -->
<div class="headerNav">
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
</body>
导航被绝对设置为 header容器。在运动中它工作正常。 它需要从页面主要内容上方的 headerContainer 后面放下。这样内容就消失了，菜单在最上面。 我这样做是通过将我的主要 class 设置为 relative 和负数 z-index: 2;因为导航设置为负 -1;
现在一切正常，看起来不错。唯一的问题是我的导航栏中的锚标签不再可点击。
我一直在寻找答案，但找不到任何相关内容。 有谁能告诉我为什么会这样？我还没有找到好的解决方案。
我想要发生的事情看起来很简单.. 它需要从后面掉下来或者至少创造它来自 header..
后面的想法我试过将导航的高度设置为 0，然后在单击时将其设置为 100%。那会放下菜单，就好像它来自后面一样。但给了我其他问题，比如锚会比实际导航背景晚或早出现。
这是包含完整示例的片段。
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
任何 children 的 z-index 直接继承自他们的 parent - 所以如果你有一个 child 里面的 z-index 是 100 parent 的 z-index 为 -1，child 相对于 -1 为 100。
您应该能够在不依赖 z-index 的情况下构建页眉和菜单。例如，我已经从您的代码中取出索引并将其放在一起（只需添加动画）：https://jsfiddle.net/efk6s1oj/
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
/* display: none; */
padding: 15px;
background: #ffffff;
transition: top 2s;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
nav {
position:absolute;
opacity:0;
}
nav.show {
top:100px;
opacity:1;
}
对于这种效果，由于您指出的问题，我使用了不同的技术来模拟掉落效果。
只需将 <nav> 放置在您想要的位置，并使用 max-height 从 0 到足够大的值，并删除所有负 z-index。
在下面的代码片段中找到解决方案
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: 9;
/* display: none; */
overflow: hidden;
padding: 0 15px;
width: calc(100% - 30px);
position: absolute;
/*top: -100px;
left: -1px;*/
top: 100%;
left: 0;
background: #ffffff;
/*transition: top 2s;*/
max-height: 0px;
transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav.show {
/*top: 100%;*/
max-height: 500px;
padding: 15px;
transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
/*z-index: -2;*/
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
避免使用 z-index 尤其是底片。您的链接无效，因为它们在 z-index.
改为更改元素在页面中的顺序，这样会更简单。
为了简单起见，我删除了您的 fonts/styles，并从动画 top 切换为动画 transform:
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
position: absolute;
top: 0;
left: 0;
}
.headerContainer,
.container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
nav {
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: 66px;
left: 0;
background: #ffffff;
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}
nav.show {
transform: translateY(0);
}
nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
}
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- First content, everything else appears on top -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- Then nav, on top of content, under header -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<!-- Finally header, on top of everything -->
<header>
<div class="headerContainer">
<div class="headerBrand">Whatever</div>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
</div>
</header>
最简单的解决方案是将 position: relative;z-index: 0; 添加到 body 元素。您的负 z-index 元素位于 body 元素的后面，这使它们无法点击。通过向主体添加 z-index，您可以强制创建堆叠上下文，并且您不会遇到此问题。
这里有完整的解释：
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
position: relative;
z-index: 0;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
您可能会争辩说元素不在主体后面，因为我们可以清楚地看到它们在背景的顶部，但这是由于 background propagation 将背景从主体移动到 html元素.
在您的初始代码中向 html 添加背景以禁用背景传播，您会注意到元素是如何在正文后面呈现的：
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html {
background:red;
}
a {
text-decoration: none;
color: #1F1F1F;
}
/* --- HEADER --- */
header {
width: 100%;
height: auto;
background: #FFF;
}
.headerContainer, .container {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 15px;
}
.headerContainer {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* --- Logo --- */
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
z-index: -1;
/* display: none; */
padding: 15px;
width: calc(100% - 30px);
position: absolute;
top: -100px;
left: -1px;
background: #ffffff;
transition: top 2s;
}
header nav.show {
top: 100%;
}
header nav ul.mainMenu {
list-style: none;
}
header nav ul li a:hover {
color: red;
}
.menuBtn {
width: 35px;
height: 35px;
text-align: center;
background: red;
font-size: 25px;
border-radius: 5px;
cursor: pointer;
color: #FFF;
}
/* --- MAIN --- */
main {
position: relative;
z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<!-- Nav -->
<nav>
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</nav>
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
主要更改包括将导航元素更改为 div 元素，其中 class 作为 header 导航并进行相应的更改。
也 z-index 工作只是不要负推 header 最多 +ve 个数字不将导航推到 -ve 个数字后面。
这是最接近您问题的最佳解决方案。
let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector(".headerNav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
menu.classList.toggle("show");
icon.classList.toggle("fa-times");
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
align-content: center;
background: #F5F5F5;
color: #1F1F1F;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
a {
text-decoration: none;
color: #1F1F1F;
}
header{
width: 100%;
height: 7rem;
}
.headerContainer, .headerNav, .container{
display: flex;
width: 90%;
max-width: 1140px;
background: white;
margin: auto;
position: relative;
justify-content: space-between;
align-items: center;
padding:1rem;
}
.headerContainer{
height: 7rem;
z-index: 3;
}
.container{
padding:2rem;
}
.headerBrand a {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
}
.headerBrand img {
padding: 0 15px 0 0;
}
.menuBtn {
width: 3rem;
height: 3rem;
text-align: center;
background: red;
font-size: 2rem;
line-height: 3rem;
border-radius: .5rem;
cursor: pointer;
color: #FFF;
}
.headerNav{
position: absolute;
top: -10rem;
transition: top .5s;
left:0;
right:0;
margin-left:auto;
margin-right: auto;
z-index: 2;
padding: 1rem;
}
.headerNav.show{
top: 7rem;
}
.mainMenu{
list-style: none;
}
.mainMenu li a:hover{
color: red;
}
<body>
<!-- header-->
<header>
<div class="headerContainer">
<!-- Logo or Brandname -->
<div class="headerBrand">
<a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
</div>
<!-- END Logo -->
<div class="menuBtn"><i class="fas fa-bars"></i></div>
<!-- END Nav -->
</div>
<!-- Nav -->
<div class="headerNav">
<ul class="mainMenu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Thirth link</a></li>
<li><a href="#">Fourth link</a></li>
</ul>
</div>
</header>
<!-- END header-->
<!-- Main -->
<main class="container">
<section>
<h1>This is a header</h1>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</main>
<!-- END Main-->
</body>