div 上的剪辑路径属性使 div 的 z 索引高于我的固定导航栏

Question

window.sr = ScrollReveal();
		sr.reveal('.b1', {
			duration: 2000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.b2', {
			duration: 1500,
			origin: 'top',
			distance: '80px'
		})
		sr.reveal('.b3', {
			duration: 1000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.w1', {
			duration: 3000,
			origin: 'right',
			distance: '200px'
		});
		sr.reveal('.w2', {
			duration: 3500,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.w3', {
			duration: 4000,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.h2-about', {
			duration: 2000,
			origin: 'top',
			distance: '150px'
		});
		const navBtn = document.querySelector('.menu-bars');
		navBtn.addEventListener('click', () => {
			const b1 = document.querySelector('.b1');
			const b2 = document.querySelector('.b2');
			const b3 = document.querySelector('.b3');
			addAnimation(b1);
			addAnimation(b2);
			addAnimation(b3);
			function addAnimation(bar) {
				bar.style.animationName = bar.className + '-animate';
			}
		});
		const aboutDiv = document.querySelector('.about-us');
		aboutDiv.addEventListener('mouseover', () => {
			const line = document.querySelector('.underline');
			line.style.animationName = 'line';
		})

html, body {
	margin: 0;
	padding: 0;
}
.side-menu {
	position: fixed;
	top: 140px;
	background-color: white;
	width: 299.5px;
	padding: 10px;
	transition: all 2s ease;
	left: -500px;
	opacity: 0.8;
}
.side-menu ul {
	list-style-type: none;
	text-align: center;
}
.side-menu li {
	color: grey;
	font-size: 1.8rem;
	margin: 6px;
	margin-left: -35px;
	margin-bottom: 35px;
	font-family: 'Ubuntu';
}
.side-menu li:hover {
	color: orange;
	cursor: pointer;
}
.menu-bars{
	position: fixed;
	left: 50px;
	top: 80px;
}
.b1, .b2, .b3 {
	width: 60px;
	height: 7px;
	background-color: red;
	margin:.55rem;
	border-radius: 9px;
}
.b1 {
	background-color: lightgreen;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
.b2 {
	background-color: white;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
.b3 {
	background-color: #ff4d4d;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes b1-animate {
	from {}
	to {width: 60px; height: 8px; position: relative; left: -50px; top: 41px; width: 100px; border-radius: 0; background-color: lightgreen;}
}
@keyframes b2-animate {
	from {}
	to {width: 60px;
	height: 8px;
	position: relative;
	left: 35px; 
	top: 33px; 
	width: 150px; 
	height: 8px; 
	border-radius: 0;
	background-color: white;}
}
@keyframes b3-animate {
	from {}
	to {width: 60px;
	height: 8px;
	position: relative;
	top: 25px;
	right: -169px; 
	width: 100px; 
	border-radius: 0;
	background-color: #ff4d4d;}
}
.intro {
	background: lightblue;
	width: 100vw;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	margin-bottom: 0;
}
h1 {
	font-family: 'Cedarville Cursive';
	position: absolute;
	left: 700px;
	top: 50px;
	color: white;
	font-size: 3rem;
}
h2 {
	text-align: center;
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	padding: 30px;
	color: white;
}
.about-us {
	margin-top: -40px;
	padding-bottom: 90px;
	background-color: #339966;
	width: 100vw;
}
.underline {
	margin: 0;
	position: absolute;
	left: 570px;
	bottom: -120px;
	background-color: orange;
	width: 0px;
	height: 3px;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	transition-timing-function: ease-out;
}
@keyframes line {
	from {left: 370px; width: 0px;}
	to {left: 570px; width: 210px; border-radius: 1.5px;}
}
p {
	position: relative;
	padding-left: 20px;
	top: -30px;
	color : white;
	font-size: 1.8rem;
	word-spacing: 7px;
	width: 400px;
	font-family: 'Josefin sans';
	margin-left: 130px;
}
.fa-caret-down {
	position: relative;
	width: 50px;
	height: 50px;
	font-size: 60px;
	color: white;
	left: 665px;
	bottom: 300px;
	transform: rotate(90deg);
}
.image-slider {
	background-color: darkgrey;
	position: relative;
	width: 440px;
	height: 350px;
	right: -710px;
	bottom: 500px;
}
.right {
	position: relative;
	width: 50px;
	height: 50px;
	font-size: 60px;
	color: white;
	left: 1145px;
	bottom: 715px;
	transform: rotate(-90deg);
	transition: all 0.5s ease;
}
.side-msg {
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	color:#e6ac00;
	position: relative;
	right: -700px;
	font-weight: bold;
	top: -560px;
}
.chile {
	width: 460px;
	height: 345px;
	position: relative;
	top: -500px;
	z-index: 11;
}
.menu-wrapper {
	width: 100VW;
	background-color: #e6ac00;
	height: 905px;
	position: relative;
	top: -720px;
	clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>El Metate | Mexican food</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
	<header>
		<nav>
			<div class="side-menu">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>Menu</li>
					<li>Contact</li>
					<li>Location</li>
					<li>News</li>
				</ul>
			</div>
			<div class="menu-bars">
				<div class="b1"></div>
				<div class="b2"></div>
				<div class="b3"></div>
			</div>
		</nav>
		<div class="intro">
			<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
		    <img src="" alt="">
		</div>
	</header>
	<section class="about">
		<div class="about-us">
			<h2 class="h2-about">About Us</h2>
			<div class="underline"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
			<i class="fas fa-caret-down"></i>
			<div class="image-slider">p</div>
			<i class="fas fa-caret-down right"></i>
			<p class="side-msg">Bueno Comida</p>
		</div>	
	</section>
	
	<section class="menu">
		<div class="menu-wrapper"></div>
	</section>
	<script src="script.js"></script>
</body>
</html>

嘿，盖伊，我正在为这家墨西哥餐厅开发一个网站。目前，我刚刚创建了一个橙色的菜单部分，我想将其放在"关于我们"部分下方。我希望菜单部分的顶部倾斜。我使用菜单div 上的剪辑路径：polygon(( 来做到这一点。问题是我的导航栏固定在左上角，在向下滚动到菜单部分时，它们会滑到div下方，就好像菜单div具有更高的z指数一样。 这是我尝试的第一件事，但没有奏效。我感谢任何帮助：(

Answer 1

增加菜单固定元素的z-index

.menu-bars{
position: fixed;
left: 50px;
top: 80px;
z-index:1; /*added this*/
}

完整代码

window.sr = ScrollReveal();
sr.reveal('.b1', {
duration: 2000,
origin: 'top',
distance: '80px'
});
sr.reveal('.b2', {
duration: 1500,
origin: 'top',
distance: '80px'
})
sr.reveal('.b3', {
duration: 1000,
origin: 'top',
distance: '80px'
});
sr.reveal('.w1', {
duration: 3000,
origin: 'right',
distance: '200px'
});
sr.reveal('.w2', {
duration: 3500,
origin: 'right',
distance: '150px'
});
sr.reveal('.w3', {
duration: 4000,
origin: 'right',
distance: '150px'
});
sr.reveal('.h2-about', {
duration: 2000,
origin: 'top',
distance: '150px'
});
const navBtn = document.querySelector('.menu-bars');
navBtn.addEventListener('click', () => {
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
const b3 = document.querySelector('.b3');
addAnimation(b1);
addAnimation(b2);
addAnimation(b3);
function addAnimation(bar) {
bar.style.animationName = bar.className + '-animate';
}
});
const aboutDiv = document.querySelector('.about-us');
aboutDiv.addEventListener('mouseover', () => {
const line = document.querySelector('.underline');
line.style.animationName = 'line';
})

html,
body {
margin: 0;
padding: 0;
}
.side-menu {
position: fixed;
top: 140px;
background-color: white;
width: 299.5px;
padding: 10px;
transition: all 2s ease;
left: -500px;
opacity: 0.8;
}
.side-menu ul {
list-style-type: none;
text-align: center;
}
.side-menu li {
color: grey;
font-size: 1.8rem;
margin: 6px;
margin-left: -35px;
margin-bottom: 35px;
font-family: 'Ubuntu';
}
.side-menu li:hover {
color: orange;
cursor: pointer;
}
.menu-bars {
position: fixed;
left: 50px;
top: 80px;
z-index: 1;
}
.b1,
.b2,
.b3 {
width: 60px;
height: 7px;
background-color: red;
margin: .55rem;
border-radius: 9px;
}
.b1 {
background-color: lightgreen;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.b2 {
background-color: white;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.b3 {
background-color: #ff4d4d;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes b1-animate {
from {}
to {
width: 60px;
height: 8px;
position: relative;
left: -50px;
top: 41px;
width: 100px;
border-radius: 0;
background-color: lightgreen;
}
}
@keyframes b2-animate {
from {}
to {
width: 60px;
height: 8px;
position: relative;
left: 35px;
top: 33px;
width: 150px;
height: 8px;
border-radius: 0;
background-color: white;
}
}
@keyframes b3-animate {
from {}
to {
width: 60px;
height: 8px;
position: relative;
top: 25px;
right: -169px;
width: 100px;
border-radius: 0;
background-color: #ff4d4d;
}
}
.intro {
background: lightblue;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
margin-bottom: 0;
}
h1 {
font-family: 'Cedarville Cursive';
position: absolute;
left: 700px;
top: 50px;
color: white;
font-size: 3rem;
}
h2 {
text-align: center;
font-family: 'Cedarville Cursive';
font-size: 3rem;
padding: 30px;
color: white;
}
.about-us {
margin-top: -40px;
padding-bottom: 90px;
background-color: #339966;
width: 100vw;
}
.underline {
margin: 0;
position: absolute;
left: 570px;
bottom: -120px;
background-color: orange;
width: 0px;
height: 3px;
animation-duration: 0.7s;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
@keyframes line {
from {
left: 370px;
width: 0px;
}
to {
left: 570px;
width: 210px;
border-radius: 1.5px;
}
}
p {
position: relative;
padding-left: 20px;
top: -30px;
color: white;
font-size: 1.8rem;
word-spacing: 7px;
width: 400px;
font-family: 'Josefin sans';
margin-left: 130px;
}
.fa-caret-down {
position: relative;
width: 50px;
height: 50px;
font-size: 60px;
color: white;
left: 665px;
bottom: 300px;
transform: rotate(90deg);
}
.image-slider {
background-color: darkgrey;
position: relative;
width: 440px;
height: 350px;
right: -710px;
bottom: 500px;
}
.right {
position: relative;
width: 50px;
height: 50px;
font-size: 60px;
color: white;
left: 1145px;
bottom: 715px;
transform: rotate(-90deg);
transition: all 0.5s ease;
}
.side-msg {
font-family: 'Cedarville Cursive';
font-size: 3rem;
color: #e6ac00;
position: relative;
right: -700px;
font-weight: bold;
top: -560px;
}
.chile {
width: 460px;
height: 345px;
position: relative;
top: -500px;
z-index: 11;
}
.menu-wrapper {
width: 100VW;
background-color: #e6ac00;
height: 905px;
position: relative;
top: -720px;
clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>El Metate | Mexican food</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<header>
<nav>
<div class="side-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
<li>Location</li>
<li>News</li>
</ul>
</div>
<div class="menu-bars">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</nav>
<div class="intro">
<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
<img src="" alt="">
</div>
</header>
<section class="about">
<div class="about-us">
<h2 class="h2-about">About Us</h2>
<div class="underline"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus
quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
<i class="fas fa-caret-down"></i>
<div class="image-slider">p</div>
<i class="fas fa-caret-down right"></i>
<p class="side-msg">Bueno Comida</p>
</div>
</section>
<section class="menu">
<div class="menu-wrapper"></div>
</section>
<script src="script.js"></script>
</body>
</html>

您也可以将clip-path替换为渐变，您将获得更好的支持：

window.sr = ScrollReveal();
sr.reveal('.b1', {
duration: 2000,
origin: 'top',
distance: '80px'
});
sr.reveal('.b2', {
duration: 1500,
origin: 'top',
distance: '80px'
})
sr.reveal('.b3', {
duration: 1000,
origin: 'top',
distance: '80px'
});
sr.reveal('.w1', {
duration: 3000,
origin: 'right',
distance: '200px'
});
sr.reveal('.w2', {
duration: 3500,
origin: 'right',
distance: '150px'
});
sr.reveal('.w3', {
duration: 4000,
origin: 'right',
distance: '150px'
});
sr.reveal('.h2-about', {
duration: 2000,
origin: 'top',
distance: '150px'
});
const navBtn = document.querySelector('.menu-bars');
navBtn.addEventListener('click', () => {
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
const b3 = document.querySelector('.b3');
addAnimation(b1);
addAnimation(b2);
addAnimation(b3);
function addAnimation(bar) {
bar.style.animationName = bar.className + '-animate';
}
});
const aboutDiv = document.querySelector('.about-us');
aboutDiv.addEventListener('mouseover', () => {
const line = document.querySelector('.underline');
line.style.animationName = 'line';
})

html,
body {
margin: 0;
padding: 0;
}
.side-menu {
position: fixed;
top: 140px;
background-color: white;
width: 299.5px;
padding: 10px;
transition: all 2s ease;
left: -500px;
opacity: 0.8;
}
.side-menu ul {
list-style-type: none;
text-align: center;
}
.side-menu li {
color: grey;
font-size: 1.8rem;
margin: 6px;
margin-left: -35px;
margin-bottom: 35px;
font-family: 'Ubuntu';
}
.side-menu li:hover {
color: orange;
cursor: pointer;
}
.menu-bars {
position: fixed;
left: 50px;
top: 80px;
z-index: 1;
}
.b1,
.b2,
.b3 {
width: 60px;
height: 7px;
background-color: red;
margin: .55rem;
border-radius: 9px;
}
.b1 {
background-color: lightgreen;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.b2 {
background-color: white;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.b3 {
background-color: #ff4d4d;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes b1-animate {
from {}
to {
width: 60px;
height: 8px;
position: relative;
left: -50px;
top: 41px;
width: 100px;
border-radius: 0;
background-color: lightgreen;
}
}
@keyframes b2-animate {
from {}
to {
width: 60px;
height: 8px;
position: relative;
left: 35px;
top: 33px;
width: 150px;
height: 8px;
border-radius: 0;
background-color: white;
}
}
@keyframes b3-animate {
from {}
to {
width: 60px;
height: 8px;
position: relative;
top: 25px;
right: -169px;
width: 100px;
border-radius: 0;
background-color: #ff4d4d;
}
}
.intro {
background: lightblue;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
margin-bottom: 0;
}
h1 {
font-family: 'Cedarville Cursive';
position: absolute;
left: 700px;
top: 50px;
color: white;
font-size: 3rem;
}
h2 {
text-align: center;
font-family: 'Cedarville Cursive';
font-size: 3rem;
padding: 30px;
color: white;
}
.about-us {
margin-top: -40px;
padding-bottom: 90px;
background-color: #339966;
width: 100vw;
}
.underline {
margin: 0;
position: absolute;
left: 570px;
bottom: -120px;
background-color: orange;
width: 0px;
height: 3px;
animation-duration: 0.7s;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
@keyframes line {
from {
left: 370px;
width: 0px;
}
to {
left: 570px;
width: 210px;
border-radius: 1.5px;
}
}
p {
position: relative;
padding-left: 20px;
top: -30px;
color: white;
font-size: 1.8rem;
word-spacing: 7px;
width: 400px;
font-family: 'Josefin sans';
margin-left: 130px;
}
.fa-caret-down {
position: relative;
width: 50px;
height: 50px;
font-size: 60px;
color: white;
left: 665px;
bottom: 300px;
transform: rotate(90deg);
}
.image-slider {
background-color: darkgrey;
position: relative;
width: 440px;
height: 350px;
right: -710px;
bottom: 500px;
}
.right {
position: relative;
width: 50px;
height: 50px;
font-size: 60px;
color: white;
left: 1145px;
bottom: 715px;
transform: rotate(-90deg);
transition: all 0.5s ease;
}
.side-msg {
font-family: 'Cedarville Cursive';
font-size: 3rem;
color: #e6ac00;
position: relative;
right: -700px;
font-weight: bold;
top: -560px;
}
.chile {
width: 460px;
height: 345px;
position: relative;
top: -500px;
z-index: 11;
}
.menu-wrapper {
width: 100VW;
background: 
linear-gradient(to top right, #e6ac00 49.8%,transparent 50%) top/100% 15.2% no-repeat,
linear-gradient(#e6ac00,#e6ac00) bottom/100% 85% no-repeat;
height: 905px;
position: relative;
top: -720px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>El Metate | Mexican food</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<header>
<nav>
<div class="side-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
<li>Location</li>
<li>News</li>
</ul>
</div>
<div class="menu-bars">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</nav>
<div class="intro">
<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
<img src="" alt="">
</div>
</header>
<section class="about">
<div class="about-us">
<h2 class="h2-about">About Us</h2>
<div class="underline"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus
quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
<i class="fas fa-caret-down"></i>
<div class="image-slider">p</div>
<i class="fas fa-caret-down right"></i>
<p class="side-msg">Bueno Comida</p>
</div>
</section>
<section class="menu">
<div class="menu-wrapper"></div>
</section>
<script src="script.js"></script>
</body>
</html>