我遇到了导航栏越过滚动条的问题，我一生都无法弄清楚为什么。我到处寻找类似的问题，但没有发现任何问题。如果有人能提供帮助，那就可以挽救生命。
body,
html {
height: 100%;
margin: 0;
font-size: 15px;
font-family: 'Glacial Indifference', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #737373;
overflow-x: hidden;
}
.container {
width: 100%;
height: 100%;
box-sizing: border-box;
z-index: 1;
/*smooths scroll css
overflow-y:hidden;
scroll-behavior:smooth;
scroll-snap-type:y mandatory;*/
}
/*N A V B A R*/
.navbar {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
width: 100%;
height: 60px;
background: rgba(0, 0, 0, 0.6);
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 0 1rem;
padding: 0 0.9rem;
}
.navbar ul li a {
font-size: 1.7rem;
text-decoration: none;
text-transform: uppercase;
color: #f0e9e5;
}
.navbar ul li a:hover {
color: #988e97;
transition: all 0.5s ease-out;
}
.navbar img {
height: 55px;
margin-top: -15px;
}
/*B G-I M G S*/
.pimg1,
.pimg2,
.pimg3,
.pimg4,
.pimg5 {
opacity: 0.9;
position: relative;
background-size: cover;
background-repeat: no-repeat;
/*
fixed=parallax
scroll=normal
*/
background-attachment: fixed;
}
.pimg1 {
background-image: url(img/home.png);
background-position: top;
min-height: 570px;
}
.pimg2 {
background-image: url(img/about.png);
background-position: center;
min-height: 400px;
}
.pimg3 {
background-image: url(img/faq.png);
background-position: center;
min-height: 400px;
}
.pimg4 {
background-image: url(img/ty.jpg);
background-position: center;
min-height: 400px;
}
.pimg5 {
background-image: url(img/footer.png);
background-position: center;
min-height: 400px;
}
/*S E C T I O N S*/
section {
text-align: center;
padding: 50px 80px;
/*scroll snap
scroll-snap-align:center;*/
}
h1 {
font-size: 2.5rem;
letter-spacing: 3px;
text-transform: uppercase;
}
p {
font-size: 1.4rem;
}
/*A B O U T*/
section#about {
background-color: #282e34;
color: #e2d9d0;
}
.p-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
grid-gap: 50px;
}
.polaroid {
width: 250px;
background-color: rgba(226, 217, 208, 0.7);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding: 20px;
}
.polaroid img {
width: 100%;
box-shadow: 0 0 3px #212121;
}
.ptext {
text-align: center;
padding: 10px 20px;
color: #282e34;
}
.ptext p {
font-size: 1.2rem;
font-weight: 200;
text-align: justify;
}
.ptext h1 {
font-size: 1.3rem;
font-weight: 900;
letter-spacing: 2px;
text-align: center;
}
/*F A Q*/
section#faq {
background-color: #282e34;
color: #e2d9d0;
}
section#faq details {
text-align: left;
padding-bottom: 30px;
}
section#faq summary {
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 1px;
text-decoration: #737373 underline double;
}
section#faq details p {
padding: 0 30px;
font-size: 1.4rem;
}
section#faq details a {
color: #988e97;
}
section#faq details a:hover {
color: #c4aea8;
transition: all 0.5s ease-out;
}
.step {
text-decoration: #737373 underline double;
font-weight: 600;
}
.important {
text-decoration: underline dotted;
letter-spacing: 2px;
text-transform: uppercase;
}
.note {
text-decoration: underline dotted;
}
.q-links {
padding-left: 25px;
}
/*T H A N K-Y O U*/
section#ty {
background-color: #282e34;
color: #e2d9d0;
}
.img-containers {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.img-box {
background-color: #f0e9e5;
display: flex;
justify-content: center;
align-items: center;
width: 175px;
height: 175px;
border-radius: 10px;
margin-bottom: 20px;
padding: 0 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}
.img-box:hover {
background-color: #212121;
transition: all 0.5s ease-in;
border-radius: 5px;
}
section#ty img {
width: 100%;
}
/*C O N T A C T*/
section#contact {
background-color: #e2d9d0;
color: #282e34;
}
h2 {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 3px;
}
section#contact img {
width: 100%;
background-color: #f0e9e5;
}
/*section#contact img:hover {
background-color:#fff;
transition: all 0.5s ease-in;
border-radius:5px;
}*/
/*FORM*/
form {
background-color: #f0e9e5;
border-radius: 10px;
border: 5px double #282e34;
}
form p {
font-size: 1.1rem;
font-weight: 600;
}
form .info {
margin-top: -10px;
font-size: 1.1rem;
letter-spacing: 0;
font-weight: 400;
}
label {
font-size: 1.1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
letter-spacing: 1px;
margin-right: 5px;
}
input {
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
padding: 7px 15px;
}
input:focus {
border: 2px solid #282e34;
border-radius: 1px;
outline: none;
transition: all 0.5s ease-in;
}
textarea {
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
width: 500px;
height: 100px;
}
input[type=checkbox] {
margin: 5px;
}
select {
padding: 5px;
border: 1px solid gray;
border-radius: 3px;
background-color: #fff;
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
}
option {
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
}
/*F O O T E R*/
section#footer {
background-color: #282e34;
color: #f0e9e5
}
h3 {
font-family: 'Glacial Indifference', sans-serif;
font-size: 2.6rem;
letter-spacing: 7px;
font-weight: 400;
margin-top: 0;
}
h4 {
font-family: 'Playfair Display SC Black', serif;
font-size: 5rem;
letter-spacing: 8px;
margin-top: -10px;
}
section#footer p {
font-size: 1.3rem;
margin-top: -55px;
}
.bold {
font-weight: 900;
letter-spacing: 1px;
text-align: center;
}
h5 {
font-size: 2rem;
letter-spacing: 2px;
}
.pages {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: space-around;
}
.footer-box {
background-color: #f0e9e5;
display: flex;
width: 90px;
height: 90px;
border-radius: 5px;
padding: 5px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}
section#footer img {
width: 100%;
}
h6 {
font-size: 1.2rem;
letter-spacing: 2px;
color: #f0e9e5;
margin-bottom: 0;
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Las Vegas DJ Agency">
<meta name="keywords" content="dj's, djs, dj agency, club dj, las vegas, las vegas dj agency, hire dj, tradeshows dj, tradeshow dj, dj for tradeshows">
<meta name="author" content="Matthew Lucio">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/d2f878b826.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="img/hp.png">
<title>Las Vegas DJ Agency</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<container>
<nav class="navbar">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li><img src="img/hp.png"></li>
<li>
<a href="#faq">F.A.Q.</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<!--sections/bgimages-->
<div class="pimg1"></div>
<section id="about">
<h1>About Las Vegas DJ Agency</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, asperiores!</p>
<div class="p-flex">
<div class="polaroid">
<img src="img/c.jpg" alt="Corporate Party">
<div class="ptext">
<h1>Corporate Events</h1>
<p>We harness the power of music and align the right DJs that suit your brands vision.</p>
</div>
</div>
<div class="polaroid">
<img src="img/n.jpg" alt="Nightclub Party">
<div class="ptext">
<h1>Nightlife</h1>
<p>Veteran DJs who understand how to maximize liquor sales and guest experience.</p>
</div>
</div>
<div class="polaroid">
<img src="img/p.jpg" alt="Private Party">
<div class="ptext">
<h1>Private Parties</h1>
<p>Masters of their craft, our DJs are ready to perform for your next event.</p>
</div>
</div>
</div>
</section>
<div class="pimg2"></div>
<section id="faq">
<h1>Frequently Asked Questions</h1>
<details>
<summary>How much does hiring a DJ cost?</summary>
<p>Typically starts $150 per hour, but price will negotiated with client based on their needs.</p>
<p>**<span class="note">Initial consultation is free and discounts offered for events Monday-Thursday.</span></p>
</details>
<details>
<summary>What forms of payment does LVDJ Agency take?</summary>
<p>Apple Pay, Cash, Check, Credit/Debit Card, Paypal, Venmo, Zelle and CashApp.</p>
</details>
<details>
<summary>Does LVDJ Agency travel?</summary>
<p>Yes, but currently only within the United States. Travelling costs will be discussed in the consultation phase.</p>
</details>
<details>
<summary>What is the process of hiring a Las Vegas DJ?</summary>
<p>• <span class="step">Step 1</span> - Fill out submit the Request a DJ form on our <a href="#contact">contact page</a>.</p>
<p>• <span class="step">Step 2</span> - Within 48 hours of form submission our Director of Talent will reach out to you for consultation on your event. We will discuss the logistics such as guest demographic, musical expectations, preferred attire
for your DJ, PA (sound system) and DJ equipment. Overall, we will discuss exactly how you envision your event to be.</p>
<p>• <span class="step">Step 3</span> - After discussing the details and pricing of your event, an agreed upon deposit for reservation will be required to secure the event date, time and DJ services.</p>
<p>• <span class="step">Step 4</span> - We introduce you to your DJ and create a plan of action for your event.</p>
<p>• <span class="step">Step 5</span> - A follow-up will be made 72 hours before the scheduled event to confirm all the details and review any changes or client updates.</p>
<p>**<span class="note">The balance left of the agreed upon price</span><span class="important"> must be paid prior </span><span class="note">to the day of the event.</span></p>
<p>• <span class="step">Step 6</span> - DJ will arrive in expected attire, and no later than 30 minutes before the event start time (unless extraneous circumstances occur) to set up agreed upon equipment (if any). Equipment will be set up neatly.</p>
<p>**<span class="note">Wireless technology is available for a cleaner and more professional experience.</span></p>
<p>• <span class="step">Step 7</span> - Music will begin at arranged time, and our DJ will utilize their skills to meet your event expectations. Now you just have to sit back and enjoy!</p>
<p>• <span class="step">Step 8</span> - Leaving a review for Las Vegas DJ Agency! If we did an exceptional job then please write a review on one of our following pages.</p>
<p><span class="q-links">• <a href="https://www.google.com/maps/place//data=!4m3!3m2!1s0xa5ef86b9b7361a7:0xc3bf91a80d9faced!12e1?source=g.page.m.rc._&laa=merchant-web-dashboard-card">Google</a> • <a href="https://www.thumbtack.com/nv/las-vegas/djs/las-vegas-dj-agency/service/425970420881645592">Thumbtack</a> • <a href="https://www.gigsalad.com/las_vegas_dj_agency_las_vegas">Gigsalad</a> • <a href="https://www.bark.com/en/us/company/las-vegas-dj-agency/yQ8BE/">Bark</a> • <a href="https://fash.com/nv/las-vegas/djs/las-vegas-dj-agency">Fash</a> • <a href="https://www.thebash.com/dj/las-vegas-dj-agency">The Bash</a> •</span></p>
</details>
</section>
<div class="pimg3"></div>
<section id="ty">
<h1>Thank You</h1>
<p>Thank you for choosing us and we appreciate your partnership!</p>
<div class="img-containers">
<div class="img-box"><img src="copyright/1.png" alt="Aldo Logo"></div>
<div class="img-box"><img src="copyright/2.png" alt="Amazon Logo"></div>
<div class="img-box"><img src="copyright/3.png" alt="Armani Exchange Logo"></div>
<div class="img-box"><img src="copyright/4.png" alt="Budlight Logo"></div>
<div class="img-box"><img src="copyright/5.png" alt="Burlington Logo"></div>
<div class="img-box"><img src="copyright/6.png" alt="Caesars Palace Logo"></div>
<div class="img-box"><img src="copyright/7.png" alt="CES Logo"></div>
<div class="img-box"><img src="copyright/8.png" alt="Champion Logo"></div>
<div class="img-box"><img src="copyright/9.png" alt="Chica Logo"></div>
<div class="img-box"><img src="copyright/10.png" alt="Diesel Logo"></div>
<div class="img-box"><img src="copyright/11.png" alt="DKNY Logo"></div>
<div class="img-box"><img src="copyright/12.png" alt="Excalibur Logo"></div>
<div class="img-box"><img src="copyright/13.png" alt="Flamingo Logo"></div>
<div class="img-box"><img src="copyright/14.png" alt="Guess Logo"></div>
<div class="img-box"><img src="copyright/15.png" alt="Guess By Marciano Logo"></div>
<div class="img-box"><img src="copyright/16.png" alt="H&M Logo"></div>
<div class="img-box"><img src="copyright/17.png" alt="Hugo Boss Logo"></div>
<div class="img-box"><img src="copyright/18.png" alt="IBM Logo"></div>
<div class="img-box"><img src="copyright/19.png" alt="Jameson Logo"></div>
<div class="img-box"><img src="copyright/20.png" alt="Jimmy Choo Logo"></div>
<div class="img-box"><img src="copyright/21.png" alt="Lids Logo"></div>
<div class="img-box"><img src="copyright/22.png" alt="Malibu Logo"></div>
<div class="img-box"><img src="copyright/23.png" alt="Mandalay Bay Logo"></div>
<div class="img-box"><img src="copyright/24.png" alt="Marc Jacobs Logo"></div>
<div class="img-box"><img src="copyright/25.png" alt="Michael Kors Logo"></div>
<div class="img-box"><img src="copyright/26.png" alt="MGM Grand Logo"></div>
<div class="img-box"><img src="copyright/27.png" alt="Mountain Dew Logo"></div>
<div class="img-box"><img src="copyright/28.png" alt="Muscle Milk Logo"></div>
<div class="img-box"><img src="copyright/29.png" alt="Neiman Marcus Logo"></div>
<div class="img-box"><img src="copyright/30.png" alt="Nordstrom Logo"></div>
<div class="img-box"><img src="copyright/31.png" alt="Oakley Logo"></div>
<div class="img-box"><img src="copyright/32.png" alt="Park MGM Logo"></div>
<div class="img-box"><img src="copyright/33.png" alt="Puma Logo"></div>
<div class="img-box"><img src="copyright/34.png" alt="Redbull Logo"></div>
<div class="img-box"><img src="copyright/35.png" alt="Robert Graham Logo"></div>
<div class="img-box"><img src="copyright/36.png" alt="Sugarcane Logo"></div>
<div class="img-box"><img src="copyright/37.png" alt="Sushi Samba Logo"></div>
<div class="img-box"><img src="copyright/38.png" alt="Tilly's Logo"></div>
<div class="img-box"><img src="copyright/39.png" alt="Tommy Hilfiger Logo"></div>
<div class="img-box"><img src="copyright/40.png" alt="TopShop Logo"></div>
<div class="img-box"><img src="copyright/41.png" alt="True Religion Logo"></div>
<div class="img-box"><img src="copyright/42.png" alt="TYKU Logo"></div>
<div class="img-box"><img src="copyright/43.png" alt="The Venetian and Palazzo Logo"></div>
<div class="img-box"><img src="copyright/44.png" alt="Victoria's Secret Logo"></div>
<div class="img-box"><img src="copyright/45.png" alt="Wynn and Encore Logo"></div>
</div>
</section>
<div class="pimg4"></div>
<section id="contact">
<h1>Contact Us</h1>
<p><span class="bold">Phone:</span> 702-843-6852 | <span class="bold">Email:</span> [email protected] | <span class="bold">WhatsApp:</span> 702-882-3195</p>
<h2>Check out our pages</h2>
<span class="pages">
<div class="footer-box"><a href="https://goo.gl/maps/taNgWpPXCmZewQGV7"><img src="img/google.png" alt="Google Page Link"></a></div>
<div class="footer-box"><a href="https://www.thumbtack.com/nv/las-vegas/djs/las-vegas-dj-agency/service/425970420881645592"><img src="img/thumb.png" alt="Thumbtack Page Link"></a></div>
<div class="footer-box"><a href="https://www.gigsalad.com/las_vegas_dj_agency_las_vegas"><img src="img/gig.png" alt="Gig Salad Page Link"></a></div>
<div class="footer-box"><a href="https://www.bark.com/en/us/company/las-vegas-dj-agency/yQ8BE/"><img src="img/bark.png" alt="Bark Page Link"></a></div>
<div class="footer-box"><a href="https://fash.com/nv/las-vegas/djs/las-vegas-dj-agency"><img src="img/fash.png" alt="Fash Page Link"></a></div>
<div class="footer-box"><a href="https://www.thebash.com/dj/las-vegas-dj-agency"><img src="img/bash.png" alt="The Bash Page Link"></a></div>
</span>
<br>
<h2>Request a DJ</h2>
<form>
<br>
<p>Preferred Name</p><input type="text" class="in" name="name">
<br>
<p>Phone Number</p><input type="tel" name="phone">
<br>
<p>Email</p><input type="email" name="email">
<br>
<p>Company Name</p><input type="text" name="company"><br>
<br>
<p>Preferred Contact Method</p>
<input type="checkbox" value="text"><label for="text">Phone: Text</label>
<input type="checkbox" value="call"><label for="call">Phone: Call</label>
<input type="checkbox" value="wa"><label for="wa">WhatsApp</label>
<input type="checkbox" value="em"><label for="em">Email</label>
<br>
<p>Event Type</p>
<p><span class="info">If choosing an 'Other' label, please add details about the event in 'Event Notes' section.</span></p>
<select>
<option>Select</option>
<option>Live Concert/Entertainment/Event</option>
<option>Live Stream</option>
<option>Wedding</option>
<option>Private: Specialty Event (Graduation, Prom/School Dances, etc.)</option>
<option>Private: Specialty Party (Birthday, Reunion, etc.)</option>
<option>Private: Other</option>
<option>Fundrasier/Non-Profit Event</option>
<option>Corporate: In-Store Retail</option>
<option>Corporate: Product Launch</option>
<option>Corporate: Other</option>
</select>
<br>
<p>Event Location</p>
<select>
<option>Select</option>
<option>Bar/Lounge</option>
<option>Nightclub</option>
<option>Resturant</option>
<option>Entertainment Venue</option>
<option>Outdoors</option>
<option>Residence</option>
<option>Other (Add in the Event Notes)</option>
</select>
<br>
<p>Genre of Music</p>
<p><span class="info">**If you have your own playlist you want played, just type playlist</span></p>
<input type="text" name="genre">
<br>
<p>Age Range of Guests</p>
<input type="checkbox" value="boomers"><label for="boomers">76-58</label>
<input type="checkbox" value="genx"><label for="genx">57-42</label>
<input type="checkbox" value="millenials"><label for="millenials">41-21</label>
<input type="checkbox" value="genz"><label for="genz">20-18</label>
<input type="checkbox" value="teens"><label for="teens">17-12</label>
<input type="checkbox" value="kids"><label for="kids">Under 12 years of age</label>
<br>
<p>Date of the Event</p><input type="date" name="date">
<br>
<p>Event Location</p><input type="text" name="location">
<br>
<p>DJ Start Time</p><input type="time" name="start">
<br>
<p>DJ End Time</p><input type="time" name="end">
<br>
<p>Will DJ equipment and PA system (a.k.a. sound system or speakers) be provided?</p>
<p><span class="info">**If providing equipment, please list all equipment specifications in the Provided Equipment section.</span></p>
<select>
<option>Select</option>
<option>Yes, we will provide a PA system (Sound System) and DJ equipment for usage.**</option>
<option>Yes. DJ needs to provide their own equipment, but PA System will be provided.**</option>
<option>Yes. DJ Equipment will be provided, but will need PA System.</option>
<option>No. DJ needs to provide euipment and PA System.</option>
<option>Not sure at this time.</option>
</select>
<br>
<p>Provided DJ Equipment and/or PA System. As well as PA System requests, if any.</p><textarea name="equip"></textarea>
<p>Event Notes</p><textarea name="notes"></textarea>
<p>Questions</p><textarea name="q"></textarea>
<br>
<input type="submit" value="Send"> <input type="reset" value="Clear">
</form>
</section>
<div class="pimg5"></div>
<section id="footer">
<h3>LAS VEGAS DJ</h3>
<h4>AGENCY</h4>
<p><span class="bold">Phone:</span> 702-843-6852 | <span class="bold">Email:</span> [email protected] | <span class="bold">WhatsApp:</span> 702-882-3195</p>
<h5>Leave a Review or Contact Us</h5>
<span class="pages">
<div class="footer-box"><a href="https://goo.gl/maps/taNgWpPXCmZewQGV7"><img src="img/google.png" alt="Google Page Link"></a></div>
<div class="footer-box"><a href="https://www.thumbtack.com/nv/las-vegas/djs/las-vegas-dj-agency/service/425970420881645592"><img src="img/thumb.png" alt="Thumbtack Page Link"></a></div>
<div class="footer-box"><a href="https://www.gigsalad.com/las_vegas_dj_agency_las_vegas"><img src="img/gig.png" alt="Gig Salad Page Link"></a></div>
<div class="footer-box"><a href="https://www.bark.com/en/us/company/las-vegas-dj-agency/yQ8BE/"><img src="img/bark.png" alt="Bark Page Link"></a></div>
<div class="footer-box"><a href="https://fash.com/nv/las-vegas/djs/las-vegas-dj-agency"><img src="img/fash.png" alt="Fash Page Link"></a></div>
<div class="footer-box"><a href="https://www.thebash.com/dj/las-vegas-dj-agency"><img src="img/bash.png" alt="The Bash Page Link"></a></div>
</span>
<h6>Las Vegas DJ Agency® 2022</h6>
</section>
</container>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>您可以尝试对 .navbar 的 CSS 部分进行此操作
.navbar {
position: sticky;
top: 0px;
left: 0px;
z-index: 2;
display: flex;
width: 100%;
height: 60px;
background: rgba(0, 0, 0, 0.6);
}
定义 z-index 值，防止元素重叠：
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1; /* Raise this value to the highest, if other elements have some z-index value defined already. Elements with higher z-index values are positioned above elements with lower or no z-index values. */
}
希望，这对某人有帮助。