所以我现在正在网站的菜单部分工作。在该部分的顶部，我有一个墨西哥卷饼的img，我想将其突出显示在菜单部分的顶部，并放在About about部分上。我在img标签上尝试了z-index并确实溢出：在父容器上可见。没工作吗有什么想法吗？
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
window.sr = ScrollReveal();
sr.reveal('.info', {
duration: 2000,
origin: 'bottom'
})html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*------ABOUT------*/
.about-section {
background-color: #17a832;
width: 100%;
position: relative;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-line {
width: 350px;
height: 5px;
background-color: #edb12f;
border-radius: 4px;
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background-color: red;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
/*------MENU------*/
.menu-section {
background-color: #edb12f;
display: flex;
width: 100%;
top: -100px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
overflow: visible;
}
.menu-section h1 {
font-size: 9.5rem;
margin-top: 0;
position: absolute;
left: 200px;
margin-top: -30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.menu-line {
width: 450px;
height: 5px;
background-color: #17a832;
border-radius: 4px;
position: absolute;
top: 190px;
left: 195px;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
padding-bottom: 50px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left #combo-platter:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.row div p {
background: #edb12f;
overflow: hidden;
position: relative;
z-index: 1;
padding: 0 6px;
}
.burrito {
position: absolute;
transform: rotate(-45deg);
top: -20px;
right: 200px;
width: 300px;
height: 300px;
z-index: 11;
overflow: visible;
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*------HOURS------*/
.hours-section {
background-color: green;
width: 100%;
height: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mexican Restaurant</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header">
<div class="nav-wrap">
<div class="nav-box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Hours</a>
<a href="#">Contact</a>
<a href="#">Location</a>
<i class="fas fa-times" id="menu-close"></i>
</div>
</div>
<div class="info-wrap">
<p class="info">Authentic Mexican Food</p>
<div class="logo-wrap">
<div>YOUR</div>
<div>LOGO</div>
<div>HERE</div>
</div>
</div>
</div>
</header>
<main>
<div class="about-section">
<h1 class="about-h1">About Us</h1>
<div class="about-line"></div>
<div class="about-wrap">
<div class="about-info">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
</div>
<div class="image-slider-wrap">
<div class="image-slider">
<i class="fas fa-sort-up" id="left"></i>
<i class="fas fa-sort-up" id="right"></i>
</div>
</div>
</div>
</div>
<div class="menu-section">
<div class="design-left">
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
</div>
</div>
<div class="design-right">
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
</div>
<div class="burrito"><img src="img/burrito.png" alt=""></div>
<h1>Menu</h1>
<div class="menu-line"></div>
<div class="column-left">
<div class="column">
<h2 class="menu-h2" id="combo-platter">Combination Platters</h2>
<div class="row">
<div>
<p>2 Beef Tacos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Enchiladas</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Tostada & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Taco & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Burrito & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Beef Burritos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Carne Asada Tacos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Carne Asada</p>
<p class="price">$6.69</p>
</div>
<div>
<p>Chorizo</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Machaca</p>
<p class="price">$6.35</p>
</div>
<div>
<p>Carnitas</p>
<p class="price">$5.89</p>
</div>
<div>
<p>2 Fish Tacos</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Chiles Rellenos</p>
<p class="price">$5.95</p>
</div>
</div>
<h2 class="menu-h2">Burritos</h2>
<div class="row">
<div>
<p>Beef Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Pork Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Carne Asada Burrito</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Chicken Burrito</p>
<p class="price">$5.49</p>
</div>
<div>
<p>California Burrito</p>
<p class="price">$6.69</p>
</div>
<div>
<p>Red Chili Burrito</p>
<p class="price">$4.89</p>
</div>
<div>
<p>Machaca Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Mixed Burrito</p>
<p class="price">$5.89</p>
</div>
<div>
<p>Chorizo Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Bacon and Egg</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Sausage and Egg</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Chorizo and Egg</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Picodegallo and Egg</p>
<p class="price">$4.99</p>
</div>
</div>
</div>
</div>
<div class="column-middle">
<div class="column">
<h2 class="menu-h2">Enchiladas</h2>
<div class="row">
<div>
<p>2 Cheese</p>
<p class="price">$4.55</p>
</div>
<div>
<p>2 Beef</p>
<p class="price">$4.65</p>
</div>
<div>
<p>2 Chicken</p>
<p class="price">$3.55</p>
</div>
</div>
<h2 class="menu-h2">Side Orders</h2>
<div class="row">
<div>
<p>Carne Asada Fries</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Jalepenos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Quesadilla</p>
<p class="price">$3.55</p>
</div>
<div>
<p>Ham Quesadilla</p>
<p class="price">$4.55</p>
</div>
<div>
<p>1/2 Pint of beans</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1/2 Pint of rice</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Super Nachos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1 Tamale</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Extra Cheese Quacamole</p>
<p class="price">$1.65</p>
</div>
<div>
<p>Supreme Quesadilla</p>
<p class="price">$3.95</p>
</div>
<div>
<p>Chips and Quacamole</p>
<p class="price">$1.65</p>
</div>
<div>
<p>1 Chiles Rellano</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Chips and salsa</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Churros</p>
<p class="price">$3.65</p>
</div>
</div>
<h2 class="menu-h2">Breafast Plates</h2>
<div class="row">
<div>
<p>Huevos Rancheros</p>
<p class="price">$6.55</p>
</div>
<div>
<p>Steaks Rancheros</p>
<p class="price">$6.65</p>
</div>
<div>
<p>Scrambled Eggs w/Ham</p>
<p class="price">$5.55</p>
</div>
<div>
<p>Scrambled Eggs w/Sausage</p>
<p class="price">$5.55</p>
</div>
<div>
<p>Chorizo Omelette</p>
<p class="price">$6.35</p>
</div>
<div>
<p>Carne Asada Omelette</p>
<p class="price">$6.45</p>
</div>
<div>
<p>Eggs and Bacon</p>
<p class="price">$3.55</p>
</div>
</div>
</div>
</div>
<div class="column-right">
<div class="column">
<h2 class="menu-h2">Drinks</h2>
<div class="row">
<div>
<p>Coca-cola</p>
<p class="price">$1.55</p>
</div>
<div>
<p>Jarrito</p>
<p class="price">$1.95</p>
</div>
<div>
<p>Sangria</p>
<p class="price">$1.95</p>
</div>
</div>
<h2 class="menu-h2">Tacos</h2>
<div class="row">
<div>
<p>Carne Asada Taco</p>
<p class="price">$2.55</p>
</div>
<div>
<p>Beef Taco</p>
<p class="price">$2.85</p>
</div>
<div>
<p>Pork Taco</p>
<p class="price">$2.85</p>
</div>
<div>
<p>Chicken Taco</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Fish Taco</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Carnita Taco</p>
<p class="price">$2.55</p>
</div>
<div>
<p>Cabeza Taco</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Adobada Taco</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Adobada Taco</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Adobada Taco</p>
<p class="price">$4.65</p>
</div>
</div>
<h2 class="menu-h2">Tortas</h2>
<div class="row">
<div>
<p>Carne Asada</p>
<p class="price">$4.09</p>
</div>
<div>
<p>Machaca</p>
<p class="price">$4.09</p>
</div>
<div>
<p>Ham</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Chorizo</p>
<p class="price">$4.95</p>
</div>
<div>
<p>chicken</p>
<p class="price">$4.95</p>
</div>
</div>
<h2 Class="menu-h2">Tostadas</h2>
<div class="row">
<div>
<p>Pork</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Beef</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Fish</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Carne Asada</p>
<p class="price">$2.65</p>
</div>
</div>
</div>
</div>
</div>
<div class="hours-section">
</div>
</main>
<footer>
</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>
答案 0 :(得分：0)
也许尝试为div.header类设置背景图像，并且该图像应显示在顶部。 是您所期望的吗？ background-image：url（墨西哥玉米煎饼的img路径）；