我正在尝试制作一个网站模板，我只是从标题和导航栏开始。我正在尝试在 #header div 中放置一个带有一些文本的 div。我将位置设置为 relative 并使用了 top 属性，但它就是不动。有人可以向我解释为什么吗？
最佳答案
您需要删除 CSS 中 #header block 之后的分号，因为这会阻止浏览器读取文件中的下一条规则:
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
};
最后一个分号不应该出现。在 #navbar li 和 #header-msg block 之后的分号也是如此。
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
}
#navbar {
position: relative;
width: 75%;
height: 100px;
top: 100px;
}
#navbar li {
display: inline;
padding-right: 40px;
color: blue;
position: relative;
left: 350px;
}
#header-msg {
position: relative;
top: 300px;
}<!DOCTYPE html>
<html>
<head>
<title>
Experimenting
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="button">Offers</li>
<li class="button">FAQ</li>
</ul>
</div>
<div id="header-msg">
<h1>We sell stuff.</h1>
<h3>You buy stuff.</h3>
</div>
</div>
</body>
</html>注意:我让 #navbar li 在代码段中有蓝色文本，以便它们从白色背景中脱颖而出。
关于css - 在标题内定位水平菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33122644/