【发布时间】：2020-08-08 20:51:47
【问题描述】：
抱歉，这段代码非常长，但我只是发布了整个内容，以便你们可以更轻松地回答我猜.. 问题在标题中，当我将鼠标悬停在容器上时，如何防止我的放大容器与我的重叠如下图所示的导航栏。我想要它在导航栏后面，但仍然放大。我正在悬停的类是“放大”以便于查找。
谢谢大家。
margin-top:100px;
}
.normal{
font-style:normal;
}
#intro-container{
display:grid;
grid-template-columns: repeat(3,400px);
grid-column-gap:200px;
margin-top:30px;
justify-content:center;
}
#header-image{
display:flex;
justify-content:center;
grid-column:2/3;
}
#vid1{
display:flex;
justify-content:center;
}
#vid2{
display:flex;
justify-content:center;
}
.navbar{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.navbar a {
float:right;
color: #f2f2f2;
display:block;
text-decoration:none;
padding: 30px 30px;
}
body{
background-color: #c19f97;
}
#intro{
padding-top:50px;
text-align:center;
}
#email-container{
display:flex;
flex-direction:column;
align-items:center;
}
#video{
text-align:center;
}
#email-input{
width:348px;
border-radius:3px;
}
#email-submit{
background-color:#7e544b;
text-decoration:none;
padding: 10px 20px;
color:white;
margin:10px 14px;
border-radius:4px;
}
#email-submit:hover{
background:#c4a49c;
transform:scale(1.02);
}
#features-container{
display:grid;
grid-template-columns:400px 400px 400px;
grid-column-gap:200px;
justify-content:center;
}
#delivery-truck-container{
display:flex;
align-items:center;
flex-direction:column;
border-style:solid;
padding:40px;
border-radius:10px;
font-style:oblique;
}
#delivery-truck-container:hover {
background:#d6c0ba;
}
#clothes-container{
display:flex;
align-items:center;
flex-direction:column;
border-style:solid;
padding:40px;
border-radius:10px;
font-style:oblique;
}
#clothes-container:hover{
background:#d6c0ba
}
#credit-card-container{
display:flex;
align-items:center;
flex-direction:column;
border-style:solid;
padding:40px;
border-radius:10px;
font-style:oblique;
}
#credit-card-container:hover{
background:#d6c0ba;
}
#delivery-truck{
height:200px;
}
#clothes{
height:200px;
}
#credit-card{
height:200px;
}
.enlarge:hover{
transform:scale(1.05);
}
<!DOCTYPE html>
<html>
<div class="navbar" id="navigationbar">
<a href="#Features">Features</a>
<a href="#intro">Introduction</a>
<a href="#prices">Prices</a> <br><br><br>
</div>
<div id="main-container">
<h1 id="header"><center>Company name</center></h1>
<div id="intro-container">
<div id="vid1"><iframe id ="vid1" src="https://www.youtube.com/embed/nSDgHBxUbVQ" width=300px height=300px></iframe></div>
<div id="header-image"><img id="image1" src="https://image.shutterstock.com/image-vector/circle-business-logo-company-name-260nw-626261534.jpg" alt="company-logo"></div>
<div id="vid2"><iframe id="vid2" src="https://www.youtube.com/embed/YdYwICNPDwI" width=300px height=300px></iframe></div><br><br>
</div>
<center><h1>Lorem ipsum</h1></center><br>
<div id="features-container">
<div class="enlarge" id="delivery-truck-container">
<div id="delivery-truck-pic">
<img class="pic" id="delivery-truck" src="https://maxcdn.icons8.com/Share/icon/ultraviolet/Ecommerce/delivery1600.png" alt="delivery-truck">
</div>
<div id="clothes-content">
<center><h1 class="normal">Lorem ipsum do</h1></center>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
<div class="enlarge" id="clothes-container">
<div id="clothes-pic">
<img class="pic1" id="clothes" src="https://image.flaticon.com/icons/png/512/106/106020.png" alt="clothes">
</div>
<div id="clothes-content">
<center><h1 class="normal">Lorem ipsum do</h1></center>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="enlarge" id="credit-card-container">
<div class="pic" id="credit-card-pic">
<img class="pic" id="credit-card" src="https://loanssos.com/wp-content/uploads/2014/07/credit-card.png" alt="credit-card">
</div>
<div id="credit-card-content">
<center><h1 class="normal">Lorem ipsum do</h1></center>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<br><br>
<div id="email-container">
<form action="https://www.freecodecamp.org/email-submit">
<div id="email">
<input id="email-input" type="email" placeholder="Enter your E-mail here..."></div>
<button id="email-submit"><b>SUBMIT E-MAIL TO RECEIVE LATEST NEWS</b></button>
</form>
</div>
</html>
抱歉，这段代码非常长，但我只是发布了整个内容，以便你们可以更轻松地回答我猜.. 问题在标题中，当我将鼠标悬停在容器上时，如何防止我的放大容器与我的重叠如下图所示的导航栏。我想要它在导航栏后面，但仍然放大。我正在悬停的类是“放大”以便于查找。多谢你们。
【问题讨论】：