Question

我为我的网站创建了一个很好的标题但是当我尝试添加内容之后，例如一个简单的段落，它只是放在我的标题容器下的同一个位置。我尝试了一些明确的修复，但这并没有解决我的问题。感谢您的帮助！

   

#back-container {
	width: 1214px;
	height: 809px;
	background-image: url("coffee-beans 2.jpg");
}

#page-container {
	width: 900px;
	height: 100%;
	background-color: rgba(214,214,214, .8);
	margin-left: auto;
	margin-right: auto;
}

header {
	width: auto;
	height: 130px;
	background-color: D8A071;
	border-bottom: 3px solid 864C1B;
	position: fixed;
	font-family: "Trattatello";
}

#logo {
	margin-top: -75px;
}

nav {
	float: right;
	width:  550px;
	padding-top: 40px;
}

nav a {
	text-decoration: none;
	color: black;
	border-radius: 20px;
	border: 2px solid black;;
	background-color: 864C1B;
	padding-top: 15px;
	margin-right: 20px;
	display: inline-block;
	text-align: center;
	width: 100px;
	height: 45px;
}

<html>
<head>
	<title>New Coffee Site</title>
	<link rel="stylesheet" type="text/css" href="coffeestyles.css">
</head>
<body>
    <div id = "back-container"> 
    <div id = "page-container">
	<header>    
			<img id = "logo" src = "coffelogo1.png">
            <nav>
				<a href="home.html"> Home </a>
				<a href="menu.html"> Menu </a>
				<a href="about.html"> About us </a>
				<a href="something.html"> Something </a>
			</nav>
		</header>
		<article>
			<p>
				asdfasfasfasfasfasfasfasf
			</p>
		</article>
	</div>
</div>
</body>
</html>

Answer 1

您的标题是固定的，因此HTML之后的任何内容都会在其下方流动。将<header>移到.page-container之外，并在.page-container的顶部添加边距，该边距等于标题的高度。这将推送内容，使其从标题结束的同一点开始。

您还需要使用top:0;和width:100%;添加标题的位置。

这是一个小提琴，展示了我的变化：http://jsfiddle.net/87c9wduf/

Answer 2

它与位置有关：固定。将margin-top添加到您正在使用的元素作为容器，将所有内容都移除。

CSS：为什么我的内容没有推下来？

2 个答案: