固定位置将其下方的所有内容向下推以创建空白？ [复制]答案

【问题标题】：position fixed pushes everything below it down creating white space? [duplicate]固定位置将其下方的所有内容向下推以创建空白？ [复制]
【发布时间】：2019-01-27 06:48:28
【问题描述】：

大家好，我正在为一家建筑公司制作网站，我刚刚完成了标题部分。我现在要返回并将导航部分设置为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>

【问题讨论】：

影响它的是.phrase 上的巨大margin-top。要么从<header> 中获取.phrase，要么从<header> 中获取<nav>。要了解有关原因的更多信息，请阅读collapsing margins。基本上<header> 的上边距由其第一个文档流元素设置，即.phrase。

标签： html css

【解决方案1】：

当您使用position: absolute 或position: fixed 时，最好使用top、right、left 和bottom 对其进行适当定位。

所以，你可以添加到你的 CSS：

nav {
  top: 0;
  left: 0;
}

【讨论】：

nav 部分和图像之间的额外空间怎么办？并且图像中的文字在图像中居中，现在位于图像的顶部？