时间戳

首页 > 解决方案 > 位置固定将其下方的所有内容向下推以创建空白？

html - 位置固定将其下方的所有内容向下推以创建空白？

问题描述

嘿家伙，我正在为一家建筑公司制作一个网站，我刚刚完成了标题部分。我现在要返回并将导航部分设置为position: fixed;执行此操作，但是会将导航部分及其下方的所有内容向下推，例如 500px，从而创建一些丑陋的空白。我可以在这个问题上获得一些帮助吗？谢谢：）

body, html {
	margin: 0;
	padding: 0;
}

/*---HEADER---*/

header {
	background-image: url(img/wall2.jpeg);
	height: 100vh;
	background-attachment: fixed;
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
}

.logo, ul {
	flex-basis: 30%;
	list-style-type: none;
}

ul {
	margin-right: 30px;
}

li {
	display: inline-block;
	font-size: 1.3rem;
	margin-right: 20px;
	font-family: 'MontSerrat';
	color: rgba(102,102,102,0.75);
}

li:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 4rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

.phrase {
	text-align: center;
	margin-top: 275px;
}

.phrase p {
	color: white;
	font-size: 3.5rem;
	font-family: 'Arvo';
	margin-bottom: 30px;

}

.phrase a {
	background-color: #e62e00;
	border-radius: 25px;
	color: white;
	font-family: 'Bitter';
	font-size: 1.8rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.phrase a:hover {
	background-color: #cc2900;
	transition: all 0.5s ease;
	cursor: pointer;
}

.phrase .fas {
	display: block;
	color: white;
	font-size: 3.5rem;
	margin-top: 15px;
}

/*---ABOUT---*/

.stats {
	width: 100%;
	height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Kane Concrete And Construction LLC</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
	<header>
		<nav>
			<div class="logo">
				<i class="fab fa-accusoft"></i>
			</div>

			<div class="nav">
				<ul>
					<li class="after">Home</li>
					<li class="after">About</li>
					<li class="after">Services</li>
					<li class="after">Job Openings</li>
					<li class="after">Gallery</li>
					<li>Contact</li>
				</ul>
			</div>
		</nav>
		
		<div class="phrase">
			<p>It all starts at the foundation.</p>
			<a>Get a Quote</a>
			<i class="fas fa-angle-down"></i>
		</div>	
	</header>

	<main>
		<div class="stats">
			<div class="start-year">
				
			</div>

			<div class="projects">
				
			</div>
		</div>
	</main>
</body>
</html>

标签： htmlcss

解决方案

当您使用position: absoluteorposition: fixed时，最好使用 , 和 来适当top地right定位left它bottom。

因此，您可以添加到您的 CSS：

nav {
  top: 0;
  left: 0;
}

推荐阅读