我创建了一个汉堡菜单，当选中时覆盖整个页面。在我的页面上，我有一些链接和悬停效果，我希望用户与之互动。问题是，当我为汉堡菜单设置z索引，使其显示在页面内容上时，页面内容变得不可理解，以至于你甚至无法点击链接等等。这种情况甚至发生在汉堡菜单被检查之前，而且仍然是不可见的。有没有一种方法可以解决这个问题，让用户可以与页面的内容进行交互，并且仍然在汉堡菜单上保持更高的堆叠顺序？我希望我已经很好地解释了自己。谢谢
我的SASS代码太长了，但让我发布它以防
@import './variables';
@import './mixin';
html, body{
height: 100%;
width: 100%;
margin: 0;
}
/*layout.html*/
.header{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: fixed;
.checkbox{
position:fixed;
box-sizing: border-box;
top: 0;
width: 100%;
height: 100%;
margin: 0;
z-index: 1;
.navigation{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
>div{
background-color: rgba(0, 0, 0, 0.8);
border-radius: 50%;
transform: scale(0);
width: 200vw;
height: 200vh;
@include flexmix(column);
flex:none;
transition: all 0.4s ease-in-out;
>div{
opacity: 0;
@include flexmix(column);
transition: all 0.4s ease;
ul{
li{
list-style: none;
@include flexmix(column);
a{
text-decoration: none;
color: $deepwhite;
padding: 10px;
}
}
}
}
}
}
.toggler{
position: absolute;
z-index: 2;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity: 0;
&:checked{
+.btn {
>div{
transform: rotate(135deg);
&::before, &::after{
transform: rotate(90deg);
}
}
}
~.navigation {
visibility: visible;
transition: all 0.1s ease 0.1s;
>div{
transform: scale(1);
transition-duration: 0.4s;
>div{
opacity: 1;
transition: ease 0.3s ease 0.3s;
}
}
}
&:hover{
+.btn{
>div{
transform: rotate(225deg);
top: 0;
}
}
}
}
}
.btn{
@include flexmix(column);
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 50px;
height: 50px;
div{
width: 70%;
height: 4px;
background: $deepyellow;
z-index: 1;
border-radius: 5px;
transition: all 0.3s ease-in-out 0.3s;
position: relative;
&::before,
&::after{
content: '';
position: absolute;
width: 100%;
height: 4px;
background: inherit;
z-index: 1;
border-radius: 5px;
transition: all 0.3s ease-in-out 0.3s;
z-index: 1;
}
&::before{
top: -16px;
}
&::after{
top: 16px;
}
}
}
}
}
.main{
position: relative;
top: 5em;
/*home.html*/
.first{
@include grids();
grid-template-areas:
'upleft katikati katikati rightsec'
'downleft katikati katikati rightsec';
.upper-left{
grid-area: upleft;
@include boxes();
background-image: url('1.jpg');
@include imgs();
@include flexmix(column);
h2 {
@include fonts(1rem)
}
}
.bottom-left{
grid-area: downleft;
@include boxes();
background-image: url('2.jpg');
@include imgs();
@include flexmix(column);
h2 {
@include fonts(1rem);
}
}
.middle-sec{
grid-area: katikati;
@include boxes();
margin: 0;
background-image: url('3.jpg');
@include imgs();
@include flexmix(column);
h1 {
@include fonts(2rem);
}
p{
@include fonts(0.7rem);
color: $deepblue;
}
}
.right-sec{
grid-area: rightsec;
@include boxes();
background-image: url('4.jpg');
@include imgs();
@include flexmix(column);
h2 {
@include fonts(1rem);
}
}
}
.middle-page {
margin-top: 30px;
ul{
@include grids();
grid-template-columns: repeat(4, 1fr);
border: none;
padding: 5rem;
li{
list-style: none;
@include flexmix(column);
a{
text-decoration: none;
box-sizing: border-box;
padding: 20px;
border-radius: 100%;
color: $deepyellow;
background-color: $deepblue;
transition: all 0.3s ease 0.3s;
&:hover{
transform: scale(1.2, 1.2);
opacity: 0.7;
}
}
small{
font-family: sans-serif;
margin-top: 5px;
}
}
}
}
.bottom{
@include grids();
grid-template-columns: repeat(2, 1fr);
@include boxes();
margin-bottom: 20px;
border: none;
align-items: center;
.picture{
width: 100%;
height: 400px;
box-sizing: border-box;
padding: 10px;
}
p{
@include fonts(1rem);
color: $deepblue;
}
}
.footer{
background: $deepblue;
padding: 2rem;
border: none;
text-align: center;
p{
@include fonts(1rem)
color:$deepwhite;
}
}
}
这是html`
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='{{url_for('static', filename='scss/style.css')}}'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<title>Flask</title>
</head>
<body>
<header class='header'>
<div class='checkbox'>
<input type='checkbox' class='toggler'>
<div class='btn'><div></div></div>
<nav class='navigation'>
<div>
<div>
<ul>
<li><a href='{{url_for('home')}}'>Home</a></li>
<li><a href='{{url_for('about')}}'>About</a></li>
<li><a href='{{url_for('login')}}'>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<main class='main'>
{% block content%}
{%endblock%}
</main>
</body>
</html>
{% extends 'layout.html'%}
{% block content %}
<section class='first'>
<div class='upper-left'>
<h2>Car Section</h2>
</div>
<div class='bottom-left'>
<h2>Phone Section</h2>
</div>
<div class='middle-sec'>
<h1>This is the Home Page</h1>
<p>A lamboghini was running with ice. He went far far away.
He start playing with another lambighini. The lamboghini his name was Prince.
He was color golden.He was the best lamboghini in the world. Then he said pink lamboghini
do you want to come with me. And he said yes.</p>
</div>
<div class='right-sec'>
<h2>Contact Us</h2>
</div>
</section>
<section class='middle-page'>
<ul>
<li><a href='#'><i class="fa fa-address-card"></i></a><small>Communication</small></li>
<li><a href='#'><i class="fa fa-bullseye"></i></a><small>Task and Projects</small></li>
<li><a href='#'><i class="fa fa-crosshairs"></i></i></a><small>CRM</small></li>
<li><a href='#'><i class="fa fa-comment"></i></i></i></a><small>Contact Center</small></li>
</ul>
</section>
<section class='bottom'>
<image class='picture' src='{{url_for('static', filename='scss/picture.jpg')}}', default='image
not found'>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias reiciendis deleniti
possimus nemo non repellendus?
Quae atque vero modi quidem! Autem cupiditate fugit doloribus ad amet, asperiores provident
commodi.</p>
</section>
<footer class='footer'>
<p>Nelliville © 2020</p>
</footer>
{% endblock %}
我自己想出来的。这一切都是为了扰乱z索引。切换汉堡包菜单时，将较低堆叠元素的z索引设置为较高的数字。这样，当汉堡菜单未被触发时，堆叠的元件将处于其原始位置，但当被触发时堆叠的元件会上升到之上