我是html和css的新手，我正在努力创建一个简单的页面。不幸的是，我在导航菜单下放置我的主菜很困难。也许我想把它放在导航菜单下100px左右。我尝试将位置改为相对位置，绝对位置等。但我几乎不知道我在做什么。问题是，即使我给我的主要一个不错的位置，当我用很多内容填充它时，它会自动向上（不仅仅扩展底部）并翻过菜单并隐藏它。我尝试以某种方式“锁定”主要的顶部部分，始终与导航保持相同的距离。如果我在主要内部放置了大量文本，我希望它扩展其底部而不是改变它的位置。
我的代码在这里：https://www.w3schools.com/code/tryit.asp?filename=G1M05IYUPR2H。
有人可以给我一个建议怎么做吗？非常感谢！
https://www.w3schools.com/code/tryit.asp?filename=G1M0W1037H57
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
.bg-image {
background-image: url("http://www.stix.bg/wp-content/themes/stix-theme/images/stix1.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: absolute;
margin-top: -300px; /*compensate for margin below*/
padding: 0;
height: 100%;
width: 100%;
}
.navigation {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 50%;
top: 15%;
transform: translate(-50%, -50%);
width: 80%;
font-family: Arial;
border-radius: 10px;
justify-content: space-around;
display: flex;
border: 1px solid #f1f1f1;
}
main {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-weight: bold;
border: 1px solid #f1f1f1;
border-radius: 10px;
position: relative;
left: 50%;
margin-top: 200px; /** <--set distance here**/
transform: translate(-50%);
width: 80%;
text-align: center;
}
ul li {
float: left;
text-decoration: none;
list-style: none;
}
a,
a:visited {
color: white;
text-decoration: none;
cursor: pointer;
}
a:hover, a:active {
color: white;
background-color: rgba(162, 44, 255, 0.5);
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
box-shadow: inset 0 -4px 20px 2px rgba(162, 44, 255, 1);
}
.link {
padding: 10px;
border-radius: 10px 0 0 10px;
width: 100%;
text-align: center;
}
.link2 {
padding: 10px;
border-radius: 0 0 0 0;
width: 100%;
text-align: center;
}
.link3 {
padding: 10px;
border-radius: 0px 10px 10px 0px;
width: 100%;
text-align: center;
}
p {
text-align: center;
margin-left: 25px;
margin-right: 25px;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="navigation">
<ul>
<li><a class="link" href="#"> Menu 1 </a></li>
<li><a class="link2" href="#"> Menu 2 </a></li>
<li><a class="link2" href="#"> Menu 3 </a></li>
<li><a class="link2" href="#"> Menu 4 </a></li>
<li><a class="link3" href="#"> Menu 5 </a></li>
</ul>
</div>
<main>
<h1 style="font-size:30px">Text here</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>希望这可以帮助。删除了position:relative的.bg-image，将position:absolute添加到main并将顶部对齐。谢谢
body, html {
margin: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
.bg-image {
background-image: url(http://www.stix.bg/wp-content/themes/stix-theme/images/stix1.jpg);
filter: blur(8px);
-webkit-filter: blur(8px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-attachment: fixed;
}
.navigation {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 50%;
top: 15%;
transform: translate(-50%,-50%);
width: 80%;
font-family:Arial;
border-radius: 10px;
justify-content: space-around;
display: flex;
border: 1px solid #f1f1f1;
}
main {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
border: 1px solid #f1f1f1;
border-radius: 10px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
top: 310px;
}
a, a:visited{
color:white;
text-decoration: none;
cursor:pointer;
}
a:hover, a:active {
color: white;
background-color: rgba(162, 44, 255, 0.5);
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
box-shadow: inset 0 -4px 20px 2px rgba(162, 44, 255, 1);
}
.link {
padding: 10px;
border-radius: 10px 0 0 10px;
width: 100%;
text-align: center;
}
.link2 {
padding: 10px;
border-radius: 0 0 0 0;
width: 100%;
text-align: center;
}
.link3 {
padding: 10px;
border-radius: 0px 10px 10px 0px;
width: 100%;
text-align: center;
}
p {
text-align: center;
margin-left: 25px;
margin-right: 25px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg-image"></div>
<div class="navigation">
<a class="link" href="#"> Menu 1 </a>
<a class="link2" href="#"> Menu 2 </a>
<a class="link2" href="#"> Menu 3 </a>
<a class="link2" href="#"> Menu 4 </a>
<a class="link3" href="#"> Menu 5 </a>
</ul>
</div>
<main>
<h1 style="font-size:30px">Text here</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>