我试图将我的导航栏浮动到页面右侧，但它一直悬挂在我左侧的固定位置图像上方

问题描述 投票：0回答：2

请参阅我在CSS代码中使用的网格区域。 “item1”是标题，带有导航栏，“item2”是菜单，即我试图在整个页面中粘贴的公司徽标，带有自己的列。

我的CSS是以下，现在简短而甜蜜，直到我弄明白：

<style>

.item1 {grid-area: header;}
.item2 {grid-area: menu;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}

.item1 {
		z-index: 2;
  font-size: 28px; 
  padding: 0px 10px;
  border: 10px solid black;
		float: right;
		position: relative;
}

li {
	display: inline-block;
}

.item2 {
		width: auto;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  /*overflow-x: hidden;*/
	display:inline-block;
       float:left;
}

.grid-container {
	display: grid;
	grid-template-areas:
		'header header header header header header'
		'menu main main main right right'
		'menu footer footer footer footer footer';
	grid-gap: 5px;
	padding: 10px;
}

.grid-container > div {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px 0;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Landing Page for freeCodeCamp.com</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles.css">
</head>
 
 <div class="grid-container">
		<div class="item2"> <!--menu fixed, at top-->

        <div id="logo">
    <img id="header-img" src="https://www.designevo.com/res/templates/thumb_small/blue-circle-and-broom.png" alt="Gemini Cleaning Services"/>
         </div>
			</div> <!--end of menu fixed, at top-->
       <div class="item1"> <!--header-->
    <nav id="nav-bar">
      <ul style="list-style: none;">
       <li><a class="nav-link" href="#">About</a></li>
							<li><a class="nav-link" href="#">Locations</a></li>
							<li><a class="nav-link" href="#">Contact</a></li>
					</nav>
					</div>		<!--end of header section-->
					

			
			<div class="item3"> <!--main section-->														
														
												<div class="grid">
													<div class="icon">
														<i class="fa fa-3x fa-fire"></i>
													</div>
				<div class="desc">
					<h2>Quality Guaranteed</h2>
					<p>We are not only reliable and consistent, but we guarantee your satisfaction.</p>
													</div> </div>
															<div class="grid">
												<div class="icon">
													<i class="fa fa-3x fa-fire"></i>
												</div>
				<div class="desc">
					<h2>Family-Owned</h2>
					<p>We're a company you can trust because we work together.</p>
				</div>
																		</div>
																		
			
									
				<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/GBwELzvnrQg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			
										<h3>If you've ever felt like this, <strong>let us help!</strong></h3>
				<br><h4>Enter your email below for a quote<br>and we'll get back to you shortly</h4>
									
  
									
										<div id="formdiv">
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
				<input type="email" id="email" placeholder="Email" required>
				<input type="submit" id="submit" value="Quote Me!" class="btn"></input>
		</form>
										</div>
			</div> <!--div for main aka item3-->
		
		<div id="item4"><!--right section-->
		</div><!--end of right section-->
		<div id="item5"><!--footer-->
		</div><!--end of footer-->
			
			
			
			</div>

			

</html>

请帮忙！谢谢！

html css
2个回答
0
投票

我认为你的意思是item1是菜单，因为它里面有nav，而item2是带有徽标的标题。首先，你让这些团体错误命名。

.item1 {grid-area: menu;}
.item2 {grid-area: header;}

然后你在你的position: fixed上有item1，导致与上述错误命名的重叠。根据您定义网格的方式删除这两个：

grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';

这应该是正确的。

<style>

.item1 {grid-area: menu;}
.item2 {grid-area: header;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}

.item1 {
		z-index: 2;
  font-size: 28px; 
  padding: 0px 10px;
  border: 10px solid black;
		position: relative;
}

li {
	display: inline-block;
}

.item2 {
		width: auto;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  /*overflow-x: hidden;*/
	display:inline-block;
}

.grid-container {
	display: grid;
	grid-template-areas:
		'header header header header header header'
		'menu main main main right right'
		'menu footer footer footer footer footer';
	grid-gap: 5px;
	padding: 10px;
}

.grid-container > div {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px 0;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Landing Page for freeCodeCamp.com</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles.css">
</head>
 
 <div class="grid-container">
		<div class="item2"> <!--menu fixed, at top-->

        <div id="logo">
    <img id="header-img" src="https://www.designevo.com/res/templates/thumb_small/blue-circle-and-broom.png" alt="Gemini Cleaning Services"/>
         </div>
			</div> <!--end of menu fixed, at top-->
       <div class="item1"> <!--header-->
    <nav id="nav-bar">
      <ul style="list-style: none;">
       <li><a class="nav-link" href="#">About</a></li>
							<li><a class="nav-link" href="#">Locations</a></li>
							<li><a class="nav-link" href="#">Contact</a></li>
					</nav>
					</div>		<!--end of header section-->
					

			
			<div class="item3"> <!--main section-->														
														
												<div class="grid">
													<div class="icon">
														<i class="fa fa-3x fa-fire"></i>
													</div>
				<div class="desc">
					<h2>Quality Guaranteed</h2>
					<p>We are not only reliable and consistent, but we guarantee your satisfaction.</p>
													</div> </div>
															<div class="grid">
												<div class="icon">
													<i class="fa fa-3x fa-fire"></i>
												</div>
				<div class="desc">
					<h2>Family-Owned</h2>
					<p>We're a company you can trust because we work together.</p>
				</div>
																		</div>
																		
			
									
				<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/GBwELzvnrQg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			
										<h3>If you've ever felt like this, <strong>let us help!</strong></h3>
				<br><h4>Enter your email below for a quote<br>and we'll get back to you shortly</h4>
									
  
									
										<div id="formdiv">
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
				<input type="email" id="email" placeholder="Email" required>
				<input type="submit" id="submit" value="Quote Me!" class="btn"></input>
		</form>
										</div>
			</div> <!--div for main aka item3-->
		
		<div id="item4"><!--right section-->
		</div><!--end of right section-->
		<div id="item5"><!--footer-->
		</div><!--end of footer-->
			
			
			
			</div>

			

</html>
0
投票

要使用网格布局，请将grid-area分配给所有内容的包装div元素。要在每个网格区域内进行布局，请将内容放在另一个div中，然后相应地设置样式。

你的position:fixed是相对于文档而不是父文件，请参阅Fixed position but relative to container 

.item1 { grid-area: header; background: red; }
.item2 { grid-area: menu; background: blue; }
.item3 { grid-area: main; background: green; }
.item4 { grid-area: right; background: pink; }
.item5 { grid-area: footer; background: orange; }

.item1 > div { float: right }

#logo { position: fixed }

.grid-container {
    height: 500px;
    width: 500px;
	display: grid;
	grid-template-areas: 'header header header header header header'
		'menu main main main right right'
		'menu footer footer footer footer footer';
}

.grid-container > div { width: auto; height: auto; color: #FFF; }
<div class="grid-container">
    <div class="item1">  					
      <div>header</div>
    </div>
    <div class="item2">
      <div>menu</div>
      <div id="logo">
       <img id="header-img" src="https://www.designevo.com/res/templates/thumb_small/blue-circle-and-broom.png" alt="Gemini Cleaning Services"/>
     </div>
    </div>
    <div class="item3">
      main
    </div>
    <div class="item4">
      right
    </div>
    <div class="item5">
      footer
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.